rollup入门介绍

介绍

rollup采用es6原生的模块机制进行模块的打包构建,rollup更着眼于未来,对commonjs模块机制不提供内置的支持,是一款更轻量的打包工具。本文从实践的角度对rollup做一个基础的入门介绍, 有问题也欢迎大家一起来探讨。

安装

在本地开发环境安装rollup

npm i rollup -D
复制代码

使用

使用方法与webpack非常相似,通常都是命令行来实现打包,当然在实际的应用中,我们经常使用npm script 进行包装。

src目录下有foo.js

// src/foo.js
export default 'hello world!';

复制代码

和作为入口文件的main.js:

// src/main.js
import foo from './foo.js';
export default function () {
  console.log(foo);
}

复制代码

在项目根目录下使用rollupmain.js进行打包:

rollup src/main.js --o dist/bundle.js --f cjs
复制代码

上面的命令表示rollupmain.js进行打包,--o参数指定了打包后的文件名及存放目录。--f参数指定打包构建后的文件是commonjs规范的文件。

使用配置文件

在命令行中通过参数形式去设置rollup的行为,不是很方便。如webpack一样,我们通常使用一个rollup.config.js的配置文件来更灵活地定制rollup的行为。 上述命令行实现的功能我们可以在配置文件中这样配置:

// rollup.config.js

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
};

复制代码

此外,我们在package.json中封装一个npm script:

"scripts": {
    "build": "rollup -c"
}
复制代码

-c参数指定rollup构建时使用的配置文件,如果缺省的话,默认会使用根目录下的rollup.config.js

在终端中执行命令:

npm run build
复制代码

搭配babel

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

这种强需求,rollup当然提供了解决方案。 首先是安装rollup-plugin-babel,该插件将rollupbabel进行了完美结合。

npm i -D rollup-plugin-babel
复制代码

rollup.config.js中配置如下:

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
  plugins: [
    babel({
      // babelrc: false,
      exclude: 'node_modules/**' // only transpile our source code
    })
  ]
};
复制代码

同时在babel的配置文件.babelrc中配置如下:

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ],
  "plugins": ["external-helpers"]
}
复制代码

我们用到了babel的一个功能集env,和external-helpers插件。babel会按照envexternal-helpers指定的功能去完成编译工作。 配置"modules": false是因为rollup会处理es6模块语法,其余的es6语法才由babel处理。 external-helpers, 是为了避免在每个模块的头部重复引用相同的"helpers"方法,只需要在构建完的bundle头部引入一次就够了。

当然使用之前我们得先安装:

npm i -D babel-preset-env babel-plugin-external-helpers
复制代码

貌似还需要安装 babel-core

兼容commonjs

npm生态已经繁荣了多年,commonjs规范作为npm的包规范,大量的npm包都是基于commonjs规范来开发的,因此在完美支持es6模块规范之前,我们仍旧需要兼容commonjs模块规范。rollup提供了插件rollup-plugin-commonjs,以便于在rollup中引用commonjs规范的包。该插件的作用是将commonjs模块转成es6模块。rollup-plugin-commonjs通常与rollup-plugin-node-resolve一同使用,后者用来解析依赖的模块路径。

安装:

npm install --save-dev rollup-plugin-commonjs rollup-plugin-node-resolve
复制代码

rollup.config.js中进行配置:

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    })
  ]
};
复制代码

tree shaking

tree shaking是rollup除es6模块外的另一个核心卖点,当然这个特性在webpack中也有实现。tree shaking的优点毋庸多言了,结合es6模块,对代码进行静态分析,能更有效地剔除冗余的代码,减小js文件的大小。一句话,大家多多使用就对了。

总结

号称下一代打包工具的rollup基于es6模块系统,同时支持tree shaking,配置上相对轻量。针对js库级别的应用非常适合使用rollup。对应业务场景丰富的应用,如需要各种loader来处理图片、css、字体等、需要按需加载,代码分割还是webpack更适合。大家可以视具体应用场景选择。

你可能感兴趣的:(rollup入门介绍)