成都网站建设设计

将想法与焦点和您一起共享

使用rollup打包JS的方法步骤

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

从事达州托管服务器,服务器租用,云主机,网络空间,申请域名,CDN,网络代维等服务。

创建项目

目录结构是这样的:

hey-rollup/
├── dist
│  ├── bundle-name.js
│  └── bundle-name.min.js
├── example
│  ├── dist
│  │  └── example.js
│  ├── index.html
│  └── index.js
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
│  └── index.js
└── test
  └── index.js

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

# cd /path/to/your/projects
git clone https://github.com/daixwu/hey-rollup.git

安装 Rollup

通过下面的命令安装Rollup:

npm install --save-dev rollup

创建配置文件

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

export default {
 input: "src/main.js",
 output: {
  file: "dist/js/main.min.js",
  format: "umd",
  name: 'bundle-name'
 }
};

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

  • input —— 要打包的文件
  • output.file —— 输出的文件 (如果没有这个参数,则直接输出到控制台)
  • output.format —— Rollup 输出的文件类型 (amd, cjs, es, iife, umd)
    • amd – 异步模块定义,用于像 RequireJS 这样的模块加载器
    • cjs – CommonJS,适用于 Node 和 Browserify/Webpack
    • es – 将软件包保存为 ES 模块文件
    • iife – 一个自动执行的功能,适合作为