关于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