面向对象编程与webpack中的babel

ES6中的面向对象

class Person {
	static info = { name: 'jack',age: 20 }
}

这些高级的ES6语法webpack无法处理，webpack只能处理一些ES6语法并不是全部

Babel

这个时候我们需要Babel将高级语法转换为低级语法

安装

执行：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D cnpm i babel-preset-env babel-preset-stage-0 -D(babel-preset-env是比较新的ES语法处理包)

配置

基于webpack.config.js文件

const path = require('path')
module.exports = {
	entry: path.join(__dirname, './src/main.js'),
	output:{
		path: path.join(__dirname, './dist'),
		filename: 'bundle.js'
	},

	module:{
		rules: [
			{ test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
			//配置babel的loader规则时，必须把node_modules目录，通过exclude选项排除掉:原因有俩:1.如果不排除node_modules,则babel会把node_modules中所有的第三方JS文件都打包编译，这样的行为会大量消耗CPU的资源，同时打包速度会大大降低，并且项目会无法运行

		]
	}	
}

在项目的根目录中，新建一个名为.babelrc的Babel配置文件，这个配置文件，属于JSON格式，不能有注释且字符串必须双引号

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