rollup 使用

介绍

• rollup 是一个 JavaScript 模块打包器，在功能上要完成的事和 webpack 性质一样，就是将小块代码编译成大块复杂的代码，例如 library 或应用程序。在平时开发应用程序时，我们基本上选择用 webpack，相比之下，rollup.js 更多是用于 library 打包，我们熟悉的 vue、react、vuex、vue-router 等都是用 rollup 进行打包的。
• rollup 支持的打包文件的格式有 amd, cjs, es\esm, iife, umd。其中，amd 为 AMD 标准，cjs 为 CommonJS 标准，esm\es 为 ES 模块标准，iife 为立即调用函数， umd 同时支持 amd、cjs 和 iife。

比较

• webpack 和 rollup 在不同场景下，都能发挥自身优势作用。webpack 对于代码分割和静态资源导入有着“先天优势”，并且支持热模块替换(HMR)，而 rollup 并不支持。
• 所以当开发应用时可以优先选择 webpack，但是 rollup 对于代码的 Tree-shaking 和 ES6 模块有着算法优势上的支持，若你项目只需要打包出一个简单的 bundle 包，并是基于 ES6 模块开发的，可以考虑使用 rollup。

常用插件

• npm i rollup-plugin-babel @babel/core @babel/preset-env --D
• npm i rollup-plugin-commonjs --D
• npm i rollup-plugin-postcss postcss --D
• npm i autoprefixer@8.0.0 --D
• npm i -D @rollup/plugin-node-resolve
• npm i -D @rollup/plugin-json

// rollup.config.js
import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import autoprefixer from "autoprefixer";
import { terser } from "rollup-plugin-terser";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import resolve from "@rollup/plugin-node-resolve";
import json from "@rollup/plugin-json";

export default {
  input: "./src/index.js",
  output: [
    {
      file: "./dist/my-lib-umd.js",
      format: "umd",
      name: "myLib",
      //当入口文件有export时，'umd'格式必须指定name
      //这样，在通过<script>标签引入时，才能通过name访问到export的内容。
    },
    {
      file: "./dist/my-lib-es.js",
      format: "es",
    },
    {
      file: "./dist/my-lib-cjs.js",
      format: "cjs",
    },
  ],
  plugins: [
    babel({
      exclude: "node_modules/**",
    }), // 用于转换es6语法，同时项目根目录创建.babelrc
    commonjs(), //支持CommonJS模块
    postcss({
      plugins: [
        autoprefixer(), //css加前缀，同时配置browserslist
        cssnano(), //css压缩
      ],
      extract: "css/index.css", // 抽离单独的css文件
    }),
    terser(), //代码压缩
    serve({
      contentBase: "", //服务器启动的文件夹，默认是项目根目录，需要在该文件下创建index.html，并且手动加入打包后的文件，js或者css
      port: 8020, //端口号，默认10001
    }),
    livereload("dist"), //watch dist目录，当目录中的文件发生变化时，刷新页面；同时在执行打包命令时，添加 -w监听源文件是否有改动
    resolve(), // Unresolved dependenices(未安装某个依赖)
    json(), // 支持json文件
  ],
  external: ["the-answer"], // 保持某些库外部引用状态
};

// .babelrc
{
  "presets": [["@babel/preset-env"]]
}

//.browserslistrc
"browserslist": [
  "defaults",
  "not ie < 8",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
]

处理.vue 文件

npm i rollup-plugin-vue@5.1.9 vue-template-compiler --D

import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import vue from "rollup-plugin-vue";
import autoprefixer from "autoprefixer";

export default {
  input: "./src/index.js",
  output: [
    {
      file: "./dist/my-lib-umd.js",
      format: "umd",
      name: "myLib",
    },
    {
      file: "./dist/my-lib-es.js",
      format: "es",
    },
    {
      file: "./dist/my-lib-cjs.js",
      format: "cjs",
    },
  ],
  plugins: [
    babel({
      exclude: "node_modules/**",
    }),
    vue({
      style: {
        postcssPlugins: [autoprefixer()],
      },
    }),
    commonjs(),
  ],
  external: [
    //外部库， 使用'umd'文件时需要先引入这个外部库
    "vue",
  ],
};

// 支持按需加载
"main": "dist/my-lib-cjs.js",
"module": "dist/my-lib-es.js",