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

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

常规先上搬砖图：

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

因为笔者对 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 就能够了，起初通过钻研，发现两者的区别：

1. babelrc 是 json 文档，而 babel.config.js 是一个 js 文件。
2. 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 则设定为跟据需援用转换。

node 可用的 babel 配置

{
  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