rollup配置babel

Posted 2021-06-27 前端精髓

rollup.config.js

import babel from "rollup-plugin-babel";
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';


export default {
  input: "src/main.js",
  output: {
    file: "dist/bundle.cjs.js", //输出文件的路径和名称
    format: "umd", //五种输出格式：amd/es6/iife/umd/cjs
    name: "bundleName", //当format为iife和umd时必须提供，将作为全局变量挂在window下
  },
  plugins: [
    babel({
      runtimeHelpers: true,
      exclude: "node_modules/**",
      externalHelpers: true
    }),
    nodeResolve({
      browser: true,
    }),
    commonjs()
  ],
};

.babelrc

{
  // 开启默认预设
  "presets": [
    [
      "@babel/env",
      {
        "modules": false  // 关闭 esm 转化，统一交由 rollup 处理，防止冲突
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-external-helpers",
    [
      // 开启 babel 各依赖联动，由此插件负责自动导入 helper 辅助函数，从而形成沙箱 polyfill 
      "@babel/plugin-transform-runtime",  
      {
        "corejs": { "version": 3, "proposals": true },
        "useESModules": true  // 关闭 esm 转化，交由 rollup 处理，同上防止冲突
      }
    ]
  ]
}

关于babel我们需要安装

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs3
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/plugin-external-helpers

关于编译我们需要安装

npm install --save-dev  @rollup/plugin-commonjs
npm install --save-dev  @rollup/plugin-node-resolve

babel-plugin-external-helpers: 把 helpers 收集到一个共享模块或共享文件。
helper 函数是 babel 在 transform 时候常用的工具函数，对编译模块时，会将用到的 helpers 放到模块顶部。如果编译多个文件，就会重复引用，导致每个模块都定义一份。

rollup提供了五种选项:

1、amd – 异步模块定义，用于像RequireJS这样的模块加载器

2、cjs – CommonJS，适用于 Node 和 Browserify/Webpack

3、es – 将软件包保存为ES模块文件

4、iife – 一个自动执行的功能，适合作为

5、umd – 通用模块定义，以amd，cjs 和 iife 为一体