使用rollup和jest进行前端工具库构建和测试的babel配置我在配置babel的时候踩了很多坑。分享。通常的做法是先搬砖图：这个库的基本思路是用新的语法写，然后用babel转成umdescjs文件。由于转换后的文件运行在浏览器端，jest测试工具运行在node端。两者在配置babel时的冲突。由于笔者对babel的研究并不深入，文档系统也比较庞大。本文只关注实现方法。浏览器可用的babel配置使用了很多ES6模块化语法，例如importexportexportdefault因为工具库。目前（babel7）新语法的转换被细分为很多小模块。比如使用了一个类，那么就会引用该类对应的转换，不会引用多余的其他支持。不过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，设置为按需转换为reference。node可用的babel配置{presets:[['@babel/preset-env',{targets:{node:'current',},},]]}以上浏览器和node对应的配置，js即可file可以动态改变。在节点端执行测试时使用节点配置，打包生成浏览器文件时执行第一个配置。如下：//babel.config.jsmodule.exports=function(api){//process.env.NODE_ENVconsole.log('env',process.env.NODE_ENV)constisTest=api.env('test')constpresets=[['@babel/preset-env',{targets:{node:'current',},},]]constdom={presets:[["@babel/preset-env",{模块：false,useBuiltIns:"usage",corejs:"2"}]],ignore:["./node/*.js"]}letconfig=isTest？{presets}:domreturnconfig}大功告成！最后附上上面工具库的地址：https://github.com/maYunLaoXi/f-com欢迎大家一起完善博客地址：Sifu个人网站：http://www.yingyinbi.com/参考资料：rollupbabel7jest
