rollup配置babel

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 为一体

  • 1
    点赞
  • 3
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值