添加简单的配置文件
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.测试
export const a = 100
debugger;
export default {a: 1}
-
运行打包命令
npm run dev -
在上面的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, 环境搭建完毕, 可以开始了
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
