关于前端:Rollup-编译资源离不开-plugin

rollup 也是一个 JavaScript 的模块化编译工具，能够帮忙咱们解决资源。

rollup相比 webpack 理念更为简略，能解决的场景也更无限。

	资源类型	解决形式	利用场景
webpack	所有资源	loader、plugin	大型项目
rollup	ES 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.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 中默认不反对 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-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 资源引入间接编译会报错，告知咱们须要适合的 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 中应用到的是 babel 和 terser 工具，在 rollup 中也相似。

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

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

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

本地服务通过 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(),],

下面的 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-vue 和 rollup-plugin-replace，转换和压缩离不开 @rollup/plugin-babel 和 rollup-plugin-terser，最初通过 `
rollup-plugin-serve 和 rollup-plugin-livereload` 开启服务。

辨别环境通过 --environment 配置参数。

以上就是 Rollup 编译资源 的介绍，更多无关 前端 、 工程化 的内容能够参考我其它的博文，继续更新中~

关于前端:Rollup-编译资源离不开-plugin

与 webpack 比拟

命令行

配置文件

反对 commonjs

解决 css 和 vue

转换和压缩

本地服务

环境辨别

总结