使用汇总打包JS的方法步骤

　　

汇总采用es6原生的模块机制进行模块的打包构建,汇总更着眼于未来,对commonjs模块机制不提供内置的支持,是一款更轻量的打包工具.rollup比较适合打包js的sdk或者封装的框架等,例如,vue源码就是汇总打包的。而webpack比较适合打包一些应用,例如温泉或者同构项目等等。

　　


　　

　　

目录结构是这样的:

　　 　　 　　hey-rollup/├──dist 　　│├──bundle-name.js 　　│└──bundle-name.min.js 　　├──的例子 　　│├──dist 　　││└──example.js 　　│├──index . html 　　│└──index.js 　　├──package-lock.json 　　├──package.json 　　├──rollup.config.js 　　├──src 　　│└──index.js 　　└──测试 　　└──index.js 　　 　　之前 　　 　　

你可以在你的终端中执行下面的命令来安装此项目

　　 　　 　　# cd/道路//你/项目 　　git克隆https://github.com/daixwu/hey-rollup.git 　　 　　


　　

　　

通过下面的命令安装汇总:

　　 　　 　　npm安装——save-dev汇总 　　 　　


　　

　　

在hey-rollup文件夹中创建一个新文件rollup.config.js。之后在文件中添加下面的内容:

　　 　　 　　出口默认{ 　　输入:“src/main.js”, 　　输出:{ 　　文件:“dist/js/main.min.js”, 　　格式:“umd格式”, 　　名称:“bundle-name” 　　} 　　}; 　　 　　之前 　　 　　

下面是每一个配置选项都做了些什么:

　　
    　　<李>输入——要打包的文件 　　<李>输出。文件——输出的文件(如果没有这个参数,则直接输出到控制台) 　　<李>输出。格式——汇总输出的文件类型(amd, cj, es、iife umd格式) 　　
      　　<李> amd -异步模块定义,用于像RequireJS这样的模块加载器李 　　<李> cj - CommonJS适用于节点和Browserify/Webpack李 　　<李> es -将软件包保存为es模块文件李 　　<李> iife——一个自动执行的功能,适合作为& lt; script>标签。(如果要为应用程序创建一个捆绑包,您可能想要使用它,因为它会使文件大小变小。) 　　
    　　李 　　<李> umd -通用模块定义,以amd, cj和iife为一体李 　　<李> output.name——生成包名称,代表你的iife/umd包,同一页上的其他脚本可以访问它(iife/没umd格式有名字会报错的)
    　　李 　　
　　


　　

　　

汇总的模块机制是ES6模块,但并不会对ES6其他的语法进行编译。因此如果要使用ES6的语法进行开发,还需要使用巴别塔来帮助我们将代码编译成es5。

　　

这种强需求,汇总当然提供了解决方案。

　　

<>强安装模块
　　

　　

rollup-plugin-babel将汇总和巴别塔进行了完美结合。

　　 　　 　　npm安装——save-dev rollup-plugin-babel@latest 　　 　　之前 　　 　　

创建.babelrc
　　

　　 　　 　　{ 　　“预设”:( 　　( 　　“@babel/preset-env”, 　　{ 　　“模块”:假的 　　} 　　］ 　　］ 　　} 　　之前 　　 　　

更新rollup.config。js
　　

　　 　　 　　从“rollup-plugin-babel进口巴别塔”; 　　 　　出口默认{ 　　插件:[ 　　巴别塔({ 　　排除:“node_modules/* *”, 　　})， 　　), 　　}; 　　 　　之前 　　 　　

为了避免转译第三方脚本,我们需要设置一个排除的配置选项来忽略掉node_modules目录

　　

<>强巴别塔7必要模块
　　

　　 　　 　　npm安装——save-dev @babel/核心 　　 　　npm安装——save-dev @babel/preset-env 　　之前 　　 　　


　　

　　

在你的代码中使用短绒无疑是十分好的决定,因为它会强制执行一致的编码规范来帮助你捕捉像是漏掉了括弧这种棘手的错误。

　　

在这个项目中,我们将会使用ESLint。

　　

<>强安装模块
　　

　　

为了使用ESLint,我们将要安装ESLint汇总插件

　　 　　 　　npm安装——save-dev rollup-plugin-eslint 　　 　　

<强>生成一个.eslintrc.json
　　

　　

为了确保我们只获取我们想要的错误,我们需要首先配置ESLint。这里可以通过下面的代码来自动生成大多数配置:

　　 　　

使用汇总打包JS的方法步骤