详解babel8.X版本用法填坑(babel-loader , @babel/core , @babel/plugin-stransform-runtime, @babel/preset-env)

  话说在前端这一块有一件让人非常匪夷所思的事情,就是包括webpack,包括几乎所有常用的前端模块(包),只要有大版本的更新,必然跟之前的版本大变脸,连api都给你变了,于是出现各种坑,真不知道为什么要这么设计。要知道在服务端的技术里,不管是Java还是.NET,技术都是有极好的延续性的,不可能说版本一更新,之前的api都变了,以前写的程序就各种报错,不能运行。新版本往往只是在旧版本的基础上添加一些东西,而不是颠覆。

  好了,吐槽完毕,归入正题。

  今天要记录的是babel 8.X版本,以及相关包的用法。之所以要说这个,原因很简单,因为babel8 跟babel7真的是大变,又是一系列的坑。

  咱们先把babel7.X版本下要用的包和各种配置先罗列出来,然后再说明babel8.x的用法。这样也好有个对比。

  一、babel7.X版本

  1.要安装的包

   1套包:npm I babel-core@7 babel-loader babel-plugin-transform-runtime –D

   第2套包:npm I babel-preset-env babel-preset-stage-0 –D(注意是-零,不是字o)  

   这里babel-loader一定要加版本号7,否则下载的将是最新版本8

  2.webpack.config.js配置文件中,rules节点的配置写法  

  { test: /\.js$/, use: 'babel-loader',exclude:/node_modules/},

  注意:

    ①虽然是2套包,但对于loader来说只有一个,所以urse属性只有一个loader

    ②exclude是排除的意思。这个属性的意思就是不要去匹配node_modules目录中的文件。

    ③node_modules中的文件都已经是现成的包了,人家都打包好了,不需要我们再去打包。

    ④而且该目录中代码文件太多,排除掉它,也能提高很高的打包性能

  3.配置.babelrc文件  

    {

    “presets” : [“env”, “stage-0”],

    “plugins” : [“transform-runtime”]

    }

  注意:

    ①"presets"是用来配置处理“语法”的项。这2套包中,带有preset的包是babel-preset-env babel-preset-stage-0 ,他们的名字分别是env/stage-0,前边的babel-preset是前缀。

    ②"plugins"是用来配置插件的项。这2套包中,只有babel-plugin-transform-runtime是插件,并且该插件的名字是“transform-runtime

  二、使用babel8.X版本  

  先从大体上介绍一下babel8的变化点

    第一,各个包的名字变了,都以@符号开头。这个变化带来2个影响。其一,以前每个包在node_modules目录下都是一个独立的文件夹;现在则在node-modules目录下有个叫“@babel”的目录,这里要安装的所有babel包,都在这个@babel目录下保存。其二,在配置的时候,写法完全变了。

    第二,有一些包被彻底废弃。比如在babel7.X版本中用到的babel-preset-stage-0

    第三,有一些新的包必须引入进来才可以。

  具体用法如下:

  1.必须安装的包如下:

  

   需要注意的是,这些@开头的包,在实用npm安装时,包名必须用引号引住,否则npm会把它当做不可识别的字符。例如:

  npm i babel-loader '@babel/core' -D

  babel-loader没有@符号,所以不需要引号包住;@babel/core则需要用引号包住。其他以此类推

  这里小版本号就不要计较了,只要大版本号能对上就都一样。

  2.各个包的作用如下   

  • babel-loader:加载器
  • @babel/corebabel核心包,babel-loader的核心依赖
  • @babel/preset-envES语法分析包
  • @babel/runtime@babel/plugin-transform-runtimebabel 编译时只转换语法,几乎可以编译所有时新的 JavaScript 语法,但并不会转化BOM(浏览器)里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。这2个包就是来搞定这些api的。
  • @babel/plugin-proposal-class-properties:用来解析类的属性的。

  3.配置webpack.config.js。由于“babel-lodaer”包名字没变,api写法也没变,还是那么写   

  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},//处理高级ES语法的babel_lodaer

   4.添加.babelrc配置文件,并在该文件中写下如下配置信息   

    {

       "presets": ["@babel/preset-env"],

      "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

    }

   这些插件及配置方法,基本上就是babel8版本下必须安装的包了。接下来npm run dev就该能运行起来项目了

posted @ 2019-02-28 09:38  天天向上吧  阅读(5051)  评论(0编辑  收藏