Babel 7 安装与配置

Babel:帮我们把高级的语法(ES6)转为低级的语法

/* Babel 7.x版本安装如下 (cnpm i @babel/cli -D)

//Babel 自带了一个内置的 CLI 命令行工具，可通过命令行编译文件以core为基础。

"@babel/cli": "^7.8.4",

"@babel/core": "^7.9.6",

//适应JavaScript的一些新特性

"@babel/plugin-proposal-class-properties": "^7.8.3",

//每个Babel编译后的脚本文件，都以导入的方式使用Babel的帮助函数，

//而不是每个文件都复制一份帮助函数的代码。提高代码重用性，缩小编译后的代码体积.

"@babel/plugin-transform-runtime": "^7.9.6",

//转码：不同的模块这些es运行环境对es6,es7,es8支持不一，有的支持好，有的支持差，为了充分发挥新版es的特性，

//我们需要在特定的平台上执行特定的转码规则，说白了就像是按需转码的意思

"@babel/preset-env": "^7.9.6",

//main.js:webpack默认打包只能处理JS类型的文件处理不了非JS类型，

//这时候就需要第三方loader加载器进行处理,并在webpack配置中书写匹配规则

"babel-loader": "^8.1.0",

.babelrc下配置

{

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

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

}

webpack配置文件下

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

// Babel 来转换高级ES语法

此时便可在main.js项目的JS入口编写相关ES6面向对象等方法辣并log出来

巴特西