基于RollUp的打包脚手架

用途

用于将一些使用ES6(包括以上)语法的JavaScript类库编译为ES5语法的类库，比如一些通过CDN引入的公共工具函数类库以及加密函数类库等。

运行命令

开发编译

npm run dev

监听main.js变化实时编译，未对代码进行压缩操作，可进行查看调试编译后的代码

生产编译

npm run build

编译代码并对代码进行压缩操作

使用方法

入口文件

入口文件为src/main.js，即要进行编译的文件，对应rollup.config.js里的input配置项，如果你要打包的模块代码有很多，不用担心，在main.js支持import或require其它文件，如:

// src/main.js
import lodash from "lodash"
import vue from "vue"
....

出口文件

编译后的文件名以及位置，对应rollup.config.js的output配置项，该配置项可以为一个对象也可以为一个数组，这里配置为一个数组，用于编译出来不同规范格式的文件，对应的format格式，通常我们使用umd格式，如下:

...
    //可自行修改文件名
    const outputName = "testModule"
    output: [
        {
            file: `dist/${outputName}.umd.min.js`,
            /**
             * String 生成包的格式。 下列之一:
                amd – 异步模块定义，用于像RequireJS这样的模块加载器
                cjs – CommonJS，适用于 Node 和 Browserify/Webpack
                esm – 将软件包保存为 ES 模块文件，在现代浏览器中可以通过 <script type=module> 标签引入
                iife – 一个自动执行的功能，适合作为<script>标签。（如果要为应用程序创建一个捆绑包，您可能想要使用它，因为它会使文件大小变小。）
                umd – 通用模块定义，以amd，cjs 和 iife 为一体
                system - SystemJS 加载器格式
            */
            format: "umd",
            name: outputName,//挂载到window的全局变量名，格式为iife/umd时必填   如window.testModule
        },
        {
            file: `dist/${outputName}.esm.min.js`,
            format: "esm",
        },
        {
            file: `dist/${outputName}.common.min.js`,
            format: "cjs"
        },
    ],
...

注意

在编译一些通用类库文件时，可以使用ES6以及以上的语法，但是建议不要使用一些新的全局变量，如Promise，因为babel只会转换新语法。转换这些新增的全局变量需要引入polyfill，建议在编写一些类库、JSSDK之类时尽量只使用新语法，不使用新的全局变量。

其它

RollUp

LiuJinYang9527/RollUp-Cli