rollup 使用

webpack 一般用作项目的打包；rollup 作为库的打包工具，不需要额外配置就可以实现tree-shaking，打包后代码更少。

  • amd – 异步模块定义，用于像 RequireJS 这样的模块加载器
  • cjs – CommonJS，适用于 Node 和 Browserify/Webpack
  • es – 将软件包保存为 ES 模块文件
  • iife – 一个自动执行的功能，适合作为<script>标签。（如果要为应用程序创建一个捆绑包，您可能想要使用它，因为它会使文件大小变小。）
  • umd – 通用模块定义，以 amd，cjs 和 iife 为一体

插件

rollup-plugin-resolve：集成外部模块代码；
rollup-plugin-commonjs：支持CommonJS模块；
rollup-plugin-babel：编译ES6+语法为ES2015；
rollup-plugin-json：支持json模块；
rollup-plugin-terser：代码压缩，取代uglify，支持ES模块;

rollup-plugin-vue: 支持vue
rollup-plugin-scss：支持scss

配置rollup.config.js

import json from 'rollup-plugin-json';
 
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [ json() ]
};

vue 项目配置

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import babel from "@rollup/plugin-babel";
import vue from "rollup-plugin-vue";
import scss from "rollup-plugin-scss";
import { terser } from "rollup-plugin-terser";

export default {
    input: "src/entry.js",
    output: {
      globals: {
        vue: "Vue",
      },
      file: 'bundle.js',
      format: 'umd'
    },
    plugins: [
      vue(),
      resolve({
        extensions: [".js", ".vue"],
      }),
      commonjs(),
      babel({
        exclude: "node_modules/**",
        babelHelpers: "bundled",
      }),
      json(),
      terser(),
    ],
    external: ["vue"],
  };

Vue+iView 配置增加的部分

 {
    ... ...
    output: {
      globals: {
        vue: "Vue",
        iview: "iview",
      },
    },
    external: ["vue", "iview"],
  };

打包

rollup -c

注意事项

  1. 出现 bindings 不支持，default 不支持等情况
解决：babel 的各个版本要和 @babel/core 统一，stage 版本已经不再支持
  1. vue 不支持等错误

打的包是 Vue3 语法，应用是 Vue2 语法

解决：Vue 的版本、vue-template-compiler 和 rollup-plugin-vue 的版本要统一，支持 Vue2 就要都是支持 Vue2 的