likes
comments
collection

Rollup 编译资源离不开 plugin

作者站长头像
站长
· 阅读数 4

rollup 也是一个 JavaScript 的模块化编译工具,可以帮助我们处理资源。

与webpack比较

rollup相比 webpack 理念更为简单,能处理的场景也更有限。

资源类型处理方式应用场景
webpack所有资源loader、plugin大型项目
rollupES Module 为主plugin库文件

命令行

通过 npm install rollup -D 先安装到项目中,也可以全局安装。在 src 文件夹下增加入口 index.js 文件,编写代码后使用命令行 npx rollup ./src/index.js -f iife -o dist/bundle.js 编译。

-o 表示输出目录-c 表示使用默认文件-w 表示 --watch 监听文件-f 表示 --format 格式化方式,有四种类型

  • cjs ( commonjs 的执行命令 )
  • iife ( esmodule 的执行命令,编译后文件会将代码放到闭包中 )
  • amd ( amd 方式的执行命令,编译后文件会通过 define 来定义 )
  • umd --name xxUtils ( 表示对多个环境支持,需要指定 name,作为全局的属性 )

编译后文件内容按原样输出Rollup 编译资源离不开 plugin

配置文件

命令行可以直接使用,当处理规则较多时命令行需要定义很长,还是通过配置文件会更为方便,默认的配置文件为 rollup.config.js

配置文件中使用 input 定义入口文件,output 定义编译后文件位置,可定义多个,因为 rollup 主要支持 esmodule,所以使用 export default 的方式导出。

export default {
  input: './src/index.js',
  output: [
    {
      format: 'umd',
      name: 'iceUtils',
      file: './dist/ice.umd.js',
    },
    {
      format: 'iife',
      name: 'iceUtils',
      file: './dist/ice.iife.js',
    },
    {
      format: 'cjs',
      file: './dist/ice.cjs.js',
    },
    {
      format: 'amd',
      file: './dist/ice.amd.js',
    },
  ],
};

通过 npx rollup -c 即可通过配置文件编译出四份代码。

Rollup 编译资源离不开 plugin

支持 commonjs

rollup 中默认不支持 commonjs ,如果使用 module.exports 这种方式导出。

// math.js
const sum = (a, b) => a + b;
const mul = (a, b) => a * b;
module.exports = {
  sum,
  mul,
};

// index.js
const { sum, mul } = require('./math');
console.log(sum(10, 20));
console.log(mul(10, 20));

代码可以通过编译,但将 js 文件引入到 html 文件中,浏览器将无法识别

Rollup 编译资源离不开 plugin

使用 @rollup/plugin-commonjs 可以解决这个问题

import commonjs from '@rollup/plugin-commonjs';
export default {
  input: './src/index.js',
  output: [
    {
      format: 'cjs',
      file: './dist/ice.cjs.js',
      exports: 'auto',
    },
  ],
  plugins: [commonjs()],
};

// index.js 要通过 esmodule 的方式引入
import { sum, mul } from './math';

如果引入了第三方资源,如 lodash,要使用 @rollup/plugin-node-resolve 来对资源进行解析,此时第三方资源会被打包进编译后的文件,这样使得编译后文件的体积非常大,通过 external 属性排除打包,并在 html 页面引入资源地址。

import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';

export default {
  input: './src/index.js',
  output: [
    {
      format: 'umd',
      file: './dist/ice.umd.js',
      name: 'iceUtils',
      globals: { lodash: '_' },
    },
  ],
  external: ['lodash'],
  plugins: [commonjs(), nodeResolve()],
};

// index.html
<script src="./node_modules/lodash/lodash.min.js"></script>
<script src="./dist/ice.umd.js"></script>

处理css和vue

css 资源引入直接编译会报错,告知我们需要合适的 plugin

Rollup 编译资源离不开 plugin

css 使用 rollup-plugin-postcss 来处理,如果项目中有 vue 文件,则需要通过 rollup-plugin-vue 来处理,rollup-plugin-replace 定义全局变量。

import vue from 'rollup-plugin-vue';
import replace from 'rollup-plugin-replace';

plugins: [
  vue(),
  replace({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  }),
],

转换和压缩

以上代码转换后都与原编写文件一致,没有进行转换和压缩,在 webpack 中使用到的是 babelterser 工具,在 rollup 中也类似。

import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

plugins: [
  babel({
    babelHelpers: 'bundled',
  }),
  terser(),
],

这样编译后的资源就经过了代码转换和压缩

Rollup 编译资源离不开 plugin

本地服务

本地服务通过 rollup-plugin-serve 开启,当资源文件发生变化时,rollup-plugin-livereload 会实时刷新浏览器。

import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

plugins: [
  serve({
    open: true,
    port: 8000,
    contentBase: '',
  }),
  livereload(),
],

Rollup 编译资源离不开 plugin

环境区分

上面的 plugin 都是写到一块的,没有区分开发模式或者生产模式,每次编译都会用到所有的插件,我们可以通过参数来做一个区分。

// 在 package.json 中定义指令
"scripts": {
    "build": "npx rollup -c --environment NODE_ENV:production",
    "serve": "rollup -c --environment NODE_ENV:development -w"
},

// rollup.config.js
const isProduction = process.env.NODE_ENV === 'production';
const plugins = [
  commonjs(),
  nodeResolve(),
  replace({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  }),
  postcss(),
  vue(),
];

if (isProduction) {
  const prodPlugin = [
    babel({
      babelHelpers: 'bundled',
    }),
    terser(),
  ];
  plugins.push(...prodPlugin);
} else {
  const devPlugin = [
    serve({
      open: true,
      port: 8000,
      contentBase: '',
    }),
    livereload(),
  ];
  plugins.push(...devPlugin);
}

这样编译开发环境就可以直接通过指令 npm run build,编译生产模式则用 npm run serve 来执行

总结

rollup 主要用于处理 esmodule 的 js 资源,通过命令行可以直接执行,需要指定入口出口文件,以及编译的方式。

默认不被支持的资源处理需要通过 plugin,自己通过 commonjs 导出的资源使用 @rollup/plugin-commonjs,第三方库解析通过 @rollup/plugin-node-resolve,处理 css 需要 rollup-plugin-postcss,vue 得依赖 rollup-plugin-vuerollup-plugin-replace,转换和压缩离不开 @rollup/plugin-babelrollup-plugin-terser,最后通过 `rollup-plugin-serverollup-plugin-livereload` 开启服务。

区分环境通过 --environment 配置参数。

以上就是 Rollup 编译资源 的介绍, 更多有关 前端工程化 的内容可以参考我其它的博文,持续更新中~