用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