乐趣区

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

退出移动版