Vue学习之Babel配置(十六)

Posted 21-forever

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue学习之Babel配置(十六)相关的知识,希望对你有一定的参考价值。

一、Babel:  (官网:https://www.babeljs.cn/docs/)

 1、Babel 是一个 javascript 编译器;

2、Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

3、 Babel的作用:

  ①、语法转换

  ②、通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)

  ③、源码转换 (codemods)

二、Babel配置思路:

  在webpack中,默认只能处理 一部分ES6的新语法,一些更高级的ES6或者ES7 语法,webpack是处理不了的;这时候,就需要借助于第三方的 loader ,来帮助webpack 处理这些高级的语法;当第三方loader 把高级语法转为低级语法之后,会把结果交给 webpack 去打包到bundle.js中;

 通过Babel ,可以帮我们将高级的语法转换为 低级的语法:

1、在webpack 中,可以运行如下两套命令,安装两套包,去安装babel 相关的loader功能:

①、第一套包:

  

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

②、第二套包:

cnpm i babel-preset-env babel-preset-stage-0 -D

2、打开 webpack 的配置文件,在module节点下的rules 数组中,添加一个新的匹配规则:

①、

 test :/\.js$/, use :‘babel-loader‘,  exclude:/node_modules/ 

②、注意:在配置babel 的loader 规则的时候,必须把node_modules目录,通过 exclude选项排除掉:原因有俩:

I、如果不排除 node_modules ,则babel 会把 node_modules 中所有的第三方JS文件,都打包编译,这样,会非常消耗CPU,同时,打包速度非常慢;

II、哪怕,最终,babel 把所有的node_modules 中的JS 转换完毕了,但是,项目也无法正常运行。

3、在项目的 根目录中,新建一个叫做:.babelrc的Babel 配置文件,这个配置文件,属于JSON 格式,所以,在写.babelrc 配置的时候,必须符合JSON语法规范:不能写注释,字符串必须用双引号;

①、在.babelrc 写下的配置:大家可以把 preset 翻译成 【语法】 的意思:


    "presets": [" env","stage-0"],
    "plugins": ["transform-runtime"]

4、目前,我们安装的  babel-preset-env 是比较新的es语法,之前,我们安装的是babel-preset-es2015,现在,出了一个更新的语法插件,叫做 babel-preset-env ,它包含了所有的 和es **相关的语法。

 

以上是关于Vue学习之Babel配置(十六)的主要内容,如果未能解决你的问题,请参考以下文章

Vue学习之vue-cli脚手架下载安装及配置

前端学习之Vue项目配置

前端学习之Vue项目使用

前端学习之JavaScript的框架

前端学习之Vue

vue学习之介绍