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出来

*/