1. 环境的搭建

2022-06-21 16:02:40 阅读：168 来源： 互联网

标签：node resolve plugin babel rollup js 环境搭建

添加简单的配置文件

1. 配置rollup的开发环境

新建一个文件夹
// 初始化文件
npm init -y

// 开发环境下安装这些插件
npm i rollup rollup-plugin-babel @babel/core @babel/preset-env @rollup/plugin-node-resolve -D

// 说明:
1. rollup  vue的打包工具
2. rollup-plugin-babel  rollup里面使用babel
3. @babel/core  babel里面的插件
4. @babel/preset-env 根据指定的执行环境提供语法装换，也提供配置 polyfill。
5. @rollup/plugin-node-resolve 添加@rollup/plugin-node-resolve插件并调用, 可以避免vscode自动添加依赖的时候出错

2. 添加rollup的配置文件

根目录下新建一个 rollup.config.js文件, 内容如下

import babel from 'rollup-plugin-babel'
//添加@rollup/plugin-node-resolve插件并调用, 可以避免vscode自动添加依赖的时候出错
import resolve from '@rollup/plugin-node-resolve'
export default {
    input: './src/index.js',	// 打包入口
    output: {		// 打包出口
        file: './dist/vue.js',	// 打包文件地址
        name: 'Vue',  // 全局上添加一个Vue变量, 与下面同用
        format: 'umd', 
        sourcemap: true, // 可以调试源文件
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'   // 排除node_modules下的任意文件,文件夹
        }),
        resolve()
    ]
}


// 重点说明:
output里面的name L"Vue", 会在全局变量上添加一个Vue属性
sourcemap: true,  可以进行源码调试, 会多生成一个vue.js.map源码映射文件,
format: umd格式

3.添加打包命令

在package.json中添加打包命令

{
  "name": "revue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -cw"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "rollup": "^2.75.7",
    "rollup-plugin-babel": "^4.4.0"
  }
}


// 说明: 
说明: -c 表示 定义配置文件, w监控
效果就是源文件一旦修改就重新打包
"dev": "rollup -cw"

4.测试

新建一个文件 scr/index.js, 内容如下, 添加一个debugger

export const a = 100

debugger;

export default {a: 1}

运行打包命令
```
npm run dev
```
会生成一个dist文件, 里面有vue.js 和 vue.js.map 两个文件

在上面的dist文件夹里面新建 1.index.html文件, 内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="vue.js"></script>
    <script>
        console.log('Vue:', Vue)
    </script>
</body>
</html>

在浏览器中打开, 能debugger, 能打印Vue, 环境搭建完毕, 可以开始了

标签：node,resolve,plugin,babel,rollup,js,环境,搭建
来源： https://www.cnblogs.com/littlelittleship/p/16397132.html