webpack babel篇

@babel/core babel的核心模块

babel-loader 解析js代码，webpack和babel的桥梁

@babel/preset-env es6转换成es5插件的集合

core-js@3

//webpack.config.js
module.exports = {
	module: {
    	rules: [
        	{
            	test: /\.js$/,
                use: 'babel-loader',
                include: path.resolve(__dirname,'src')
                exclude: /node_modules/
            }
        ]
    }
}

//.babelrc
{
    "presets":[
    	[
          “@babel/preset-env”,
          {
            "useBuiltIns": "usage",//只转化使用的api
            "corejs": 3, //@babel/pollyfill 封装高版本的api
          }
       ],//插件集合 从下往上
    ],
    "plugins": []//一个个插件 从上往下
}

草案(了解)

@babel/plugin-syntax-class-properties

@babel/plugin-proposal-decorators

//.babelrc
{
    "presets":[
    	[
          “@babel/preset-env”,
          {
            "useBuiltIns": "usage",//只转化使用的api
            "corejs": 3, //@babel/pollyfill 封装高版本的api
          }
       ],//插件集合 从下往上
    ],
    "plugins": [
    	"@babel/plugin-proposal-decorators",
        "@babel/plugin-proposal-class-properties"
    ]//一个个插件 从上往下
}

两个文件都用到了class时，两个文件同时重新封装了这个高版本的api

@babel/plugin-transform-runtime

@babel/runtime

//.babelrc
{
    "presets":[
    	[
          “@babel/preset-env”,
          {
            "useBuiltIns": "usage",//只转化使用的api
            "corejs": 3, //@babel/pollyfill 封装高版本的api
          }
       ],//插件集合 从下往上
    ],
    "plugins": [
    	"@babel/plugin-transform-runtime",
    	["@babel/plugin-proposal-decorators", {"legacy": true}],
        ["@babel/plugin-proposal-class-properties", {"loose": true}]
    ]//一个个插件 从上往下
}