关于javascript:用rollup和jest进行前端工具库构建与测试的babel配置

最近在写一个前端工具库，用到 rollup 构建，jest 测试。在配置 babel 的时候踩了好多坑。分享一下。

常规先上搬砖图：

本库根本的意路就是用新的语法写，而后用 babel 转换成 umd es cjs 文件。因为转换后的文件是运行在浏览器端，而 jest 测试工具是运行在 node 端。两者在 babel 配置时产生的抵触。

因为笔者对 babel 钻研不算深刻，文档体系也比拟大。本文只着重说说实现形式。

因为工具库使用了大量的 import export export default 等 ES6 模块化的语法。目前（babel7）对新语法的转换细分为很多个小的模块，比方如果应用了class 那么就援用 class 对应的转换，而不会援用多余的其余反对。
然而，rollup 中文网上对 babel 介绍的文档有点旧。比如说 rollup-plugin-babel 这个插件就曾经合并了external-helpers，无需再在 babelrc 中配置。

(注：官网介绍是办法是用 babel-preset-latest 与external-helpers搭配应用)

同时，babel7 举荐应用 babel.config.js 来代替babelrc。一开始我感觉没有关系，能读取到 babelrc 就能够了，起初通过钻研，发现两者的区别：

babelrc 是 json 文档，而 babel.config.js 是一个 js 文件。
babel.config.js 最大的益处就是能够执行一些办法来更改配置。

rollup 文档介绍的办法：

{
  "presets": [
    // 这里是 `babel-preset-latest` 的配置
    ["latest", {
      "es2015": {"modules": false}
    }]
  ],
  // external-helpers 已弃用
  "plugins": ["external-helpers"]
}

而新的适应浏览器配置为：

{
  presets: [
    [
        "@babel/preset-env",
        {
            modules: false,
            useBuiltIns: "usage",
            corejs: "2"
        }
    ]
 ],
}

其中：useBuiltIns 的值为 usage 则设定为跟据需援用转换。

{
  presets: [
   [
     '@babel/preset-env',
     {
       targets: {node: 'current',},
     },
   ]
  ]
}

对于上述的浏览器和 node 对应的配置，刚好 js 文件就能够动静的更改。当在 node 端执行 test 时用 node 配置，而当打包生成浏览器文件时执行第一个配置。

如下：

// babel.config.js
module.exports = function(api) {
  // process.env.NODE_ENV
  console.log('env', process.env.NODE_ENV)
  const isTest = api.env('test')
  const presets =  [
    [
      '@babel/preset-env',
      {
        targets: {node: 'current',},
      },
    ]
  ]
  const dom = {
    presets: [
      [
        "@babel/preset-env",
        {
          modules: false,
          useBuiltIns: "usage",
          corejs: "2"
        }
      ]
    ],
    ignore: ["./node/*.js"]
  }
  let config = isTest ? {presets} : dom
  return config
}

功败垂成！

上文工具库地址: https://github.com/maYunLaoXi/f-com

欢送一起欠缺

博客地址：思否

集体网站：http://www.yingyinbi.com/

参考资料：

rollup

babel7

jest

关于javascript:用rollup和jest进行前端工具库构建与测试的babel配置

浏览器可用的 babel 配置

node 可用的 babel 配置

最初