https://segmentfault.com/a/1190000016458913
这里缺一个包@babel/plugin-proposal-class-properties，加上这个就行了
// 项目的JS入口文件
console.log('ok')
import './css/index.css'
import './css/index.scss'
// 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径
// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'
// class 关键字，是ES6中提供的新语法，是用来 实现 ES6 中面向对象编程的方式
class Person {
// 使用 static 关键字，可以定义静态属性
// 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性
// 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性
static info = { name: 'zs', age: 20 }
}
// 访问 Person 类身上的 info 静态属性
console.log(Person.info)
// 在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中
// 通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法
// 1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则：
// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
// 2.2 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
// 2.2.1 如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
// 2.2.2 哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
// 3. 在项目的 根目录中，新建一个 叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号
// 3.1 在 .babelrc 写如下的配置： 大家可以把 preset 翻译成 【语法】 的意思
// {
// "presets": ["env", "stage-0"],
// "plugins": ["transform-runtime"]
// }
// 4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法
// Java C# 实现面向对象的方式完全一样了， class 是从后端语言中借鉴过来的， 来实现面向对象
// var p1 = new Person()
// function Animal(name){
// this.name = name
// }
// Animal.info = 123
// var a1 = new Animal('小花')
// // 这是静态属性：
// // console.log(Animal.info)
// // 这是实例属性：
// console.log(a1.name)
以上方法对于新升级的babel7x不适用，
需要卸载掉babel-core babel-plugin-* babel-preset-*
重新安装@babel/core @babel/preset-,并且修改 .babelrc中的 presets（前后要写全）
重新安装@babel/plugin-，并且修改.babelrc中的plugins（前后都写全）
升级前后事项看官方文档，可谷歌翻译https://github.com/babel/babel-upgrade
babel-preset-stage-stage-0不好使了，@babel/preset-stage-0也被移除了，.babelrc中不要添加
但是要加上@babel/plugin-proposal-class-properties，需要安装上
但还是出现
image.png
查文档得知需要安装@babel/runtime
npm install --save @babel/runtime
image.png
然后就可以完美运行了
image.png
总结：
babel是用来将高级语法转换为低级语法给webpack打包的loader
之前的：
// 1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
已经不好使了
需要：
npm i @babel/core babel-loader @babel/plugin-transform-runtime @babel/runtime -D
npm i @babel/preset-env @babel/plugin-proposal-class-properties -D
这里只有babel-loader不需要@符号，
satge-0已经被废弃，但出现问题需要npm i @babel/plugin-proposal-class-properties -D用来解析类的属性的。
然后在webpage.config.js的配置文件中添加：
{ test: /.js$/, use: 'babel-loader', exclude: /node_modules/}
在babelrc配置文件中添加：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}
然后就能轻松运行起来
babel-loader正确配置方法[https://www.npmjs.com/package/babel-loader/v/8.0.0-beta.1]
npm安装的正确方式是把版本号放在@的后面，如：npm i bootstrap@3.3.7 -D
网友评论