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

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

与webpack比拟

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

命令行

通过 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 即可通过配置文件编译出四份代码。

反对 commonjs

rollup 中默认不反对 commonjs ，如果应用 module.exports 这种形式导出。

// math.jsconst sum = (a, b) => a + b;const mul = (a, b) => a * b;module.exports = {  sum,  mul,};// index.jsconst { 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和vue

将 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.jsconst 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 编译资源 的介绍， 更多无关 前端、工程化 的内容能够参考我其它的博文，继续更新中~