前端歌谣-第玖拾贰课-手写vue2原理-环境配置
原创
©著作权归作者所有:来自51CTO博客作者前端歌谣的原创作品,请联系作者获取转载授权,否则将追究法律责任
前言
安装依赖
npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev
package.json
{
"name": "geyaohandvue2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "rollup -cw"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.23.3",
"@babel/preset-env": "^7.23.3",
"rollup": "^2.79.1",
"rollup-plugin-babel": "^4.4.0"
}
}
rollup.config.js
import babel from 'rollup-plugin-babel'
export default {
input:"./src/index.js",
output:{
file:'./dist/vue',
name:"Vue",
format:'umd', //函数自执行 common.js模块 life自执行函数
sourcemap:true
},
plugins:[
babel({
exclude:"node_modules/**"
})
]
}
打包结果
测试index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./vue"></script>
<script>
console.log(Vue)
</script>
</body>
</html>
运行结果