Babel: plugin, preset的区别于使用

Posted 2023-04-22

参考技术A  1， "plugins": [ "transform-es2015-arrow-functions", "transform-es2015-template-literals" ]

     `npm bin`/babel --plugins transform-es2015-arrow-functions,transform-es2015-template-literals index.js

       如果没有预设，babel转化是需要指定用什么插件的，颗粒度小，效率高，但是插件需要逐个安装(babel 官方拆成了20+个插件)。

2， 为了解决插件依赖的问题，采用了Babel Preset。(Babel Preset视为Babel Plugin的集合， 比如babel-preset-es2015包含所有跟ES6转换有关的插件)

       `npm bin`/babel --presets es2015 index.js

多个Plugin和Preset时执行顺序非常重要

       1，先执行完所有Plugin，再执行Preset。

       2，多个Plugin，按照声明次序顺序执行。

       3，多个Preset，按照声明次序逆序执行。

       eg:     "plugins": [ "transform-react-jsx", "transform-async-to-generator" ], "presets": [ "es2015", "es2016" ]

    "presets": [ "./mypreset.js" ]

  // mypreset.js 

   module.exports = presets: [ require("babel-preset-es2015"), ], plugins: [ require("babel-plugin-transform-react-jsx"), ] ;

     "presets": [ presetName01, // 没有配置 [ presetName02, presetOptions02 ] // 有配置 ]

    eg:  "presets": [ ["es2015", "loose": true, "modules": false ] ]

1，babel-preset-env 是一个新的 preset，可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。

      babel-preset-es2015(转换为es5)、babel-preset-es2016(转化为es6)、babel-preset-es2017(转化为es7)、babel-preset-latest(转化最新stage4进度)

2，插件越来越多，效率变慢，浏览器升级，提出了 babel-preset-env, 默认配置的情况下，它跟 babel-preset-latest 是等同的，会加载从es2015开始的所有preset。

         Eg: "presets": [ "env" ] ==== "presets": [ “latest" ]

         Eg: 针对node环境 "presets": [ ["env", "targets": "node": "8.9.3" ] ]

         Eg: 针对ie11 "presets": [ ["env", "targets": "browsers": "ie 11" ] ]

          Eg: 针对Edge16 "presets": [ ["env", "targets": "browsers": "edge 16" ] ]  

          Eg: 针对Ie8+,chrome62+: "presets": [ ["env", "targets": "browsers": [ "ie >= 8", "chrome >= 62" ] ] ]

          Eg: 服务端命令行编译：npm bin browserslist "ie >= 8, chrome >= 62”

3，env 原理

        1、首先，检测浏览器对JS特性的支持程度，比如通过通过  compat-table  这样的外部数据。

        2、将 JS特性 跟 特定的babel插件 建立映射，映射关系可以参考  这里 。

        3、stage-x 的插件不包括在内。

        4、根据开发者的配置项，确定至少需要包含哪些插件。比如声明了需要支持 IE8+、chrome62+，那么，所有IE8+需要的插件都会被包含进去。

Plugin/Preset files are not allowed to export objects，webpack报错/babel报错的解决方法

1、为什么会报错 ？

　　这里抱着错误是因为 babel 的版本冲突。

　　多是因为你的 babel 依赖包不兼容。

 

　　可以查看你的 package.json 的依赖列表

　　即有 babel 7.0 版本的( @babel/core ， @babel/preset-react )

　　也可命令查看 bebel-cli 的版本 （ babel -V ）

　　也有 babel 6.0 版本的 ( [email protected] , [email protected] , [email protected] )

　　

　　如果在你的 package.json 依赖包中既有 babel 7.0 版本，又有 babel 6.0 版本，就会报这个错误

　　很现实就是两个版本是不兼容的

 

2、处理方法

 

　　1、升级到 babel 7.0

　　

　　将所有有关 babel 的包都升级为 7.0 版本

1 2 3 4 5 6

"@babel/core": "^7.0.0-beta.40", "@babel/cli": "^7.0.0-beta.40", "babel-loader": "^8.0.0-beta.0", "babel-plugin-lodash": "^3.3.2", "babel-plugin-react-transform": "^3.0.0", "@babel/preset-react": "^7.0.0-beta.40",<br>"@babel/preset-stage-0":‘^7.0.0‘

　　

　　并且修改 .babelrc 文件

　　对应的修改  presets 预设和 plugins 都改为 7.0 形式。

1 2 3 4

query: {    presets: [‘@babel/react‘, ‘@babel/stage-0‘],    plugins: [‘‘]  }

　　

 

　　2、降级到 babel 6.0 版本

　　

　　有时候我们看们的 package.json 里面都是 babel 6.0 版本的。

　　如下：

　　

1 2 3 4 5

"babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-0": "^6.24.1",

　　但是还是报错，为什么呢？

 

　　你不妨把 node_modules 删掉，重新 install ，这样就可以处理一部分兼容问题

 

　　如果上面的方法还是不行。

　　你可以查看一下 babel-cli 的版本

1

babel -V

　　如果是 babel-cli 7.0 版本。

　　

　　那你就重新安装全局和本地的 babel-cli 版本为 6.0

 

1 2 3

npm install -g [email protected]   yarn add [email protected]

　　

　　

　　基本上面两个方法可以解决所有兼容问题。