1、新建文件夹
2、用vscode打开
3、新建终端,输入命令,初始化项目
npm init -y
4、安装rollup 导包工具,主要打包js库,比webpack打包工具的生成的包要小
Rollup也是一款ESModule打包器,可以将项目中的细小模块打包成整块代码,使得划分的模块可以更好的运行在浏览器环境或者是Nodejs环境。Rollup与Webpack作用非常类似,不过Rollup更为小巧。webpack结合插件可以完成前端工程化的绝大多数工作,而Rollup仅仅是一款ESM打包器,没有其他功能,例如Rollup中并不支持类似HMR这种高级特性。Rollup并不是要与Webpack全面竞争,而是提供一个充分利用ESM各项特性的高效打包器。
Babel 是 JavaScript 编译器:他能让开发者在开发过程中,直接使用各类方言(如 TS、Flow、JSX)或新的语法特性,而不需要考虑运行环境,因为 Babel 可以做到按需转换为低版本支持的代码;Babel 内部原理是将 JS 代码转换为 AST,对 AST 应用各种插件进行处理,最终输出编译后的 JS 代码。babel常见插件
npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev
5、添加文件、修改配置,rollup配置文件的默认名字
文件内添加以下配置代码 关于'es' | 'cjs' | 'umd' | 'iife' 相关介绍 前端模块化学习
import babel from 'rollup-plugin-babel'
//rollup ES6 默认导出对象 作为打包配置文件
export default{
//指定打包入口
input:'./src/index.js',
output:{
file:'./dist/vue.js',
name:'Vue',
format:'umd',//esm es6模块 commonjs模块 iife自执行函数 umd(commonjs和amd异步模块加载机制)
sourcemap:'true',//希望可以调试代码
},
plugins:[
babel({
exclude:'node_modules/**'//排除node_modules所有文件 不需要将es5语法转换成es6
})
]
}