webpack学习记录(四)-处理js代码

webpack学习记录(四)-处理js代码

ES6的一些高级语法浏览器暂不支持，因此需要把代码转换成ES5才可以在浏览器上正常执行。所需要安装的插件如下：

• babel-loader
• @babel/core
• @babel/preset-env
• @babel/plugin-proposal-class-properties
• @babel/plugin-proposal-decorators
• @babel/plugin-transform-runtime

高级代码转低级代码

以下两种配置方法

1. 只配置webpack.config.js

module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'	//大的预设包
                        ],
                        plugins: [
                            ['@babel/plugin-proposal-class-properties', {"loose": true}],
                            ['@babel/plugin-proposal-decorators',{"legacy": true}],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                exclude: /(node_modules)/
            }
        ]
    }

2. 配置.babelrc文件和webpack.config.js

//.babelrc
{
	presets: [
    	'@babel/preset-env'	//大的预设包
    ],
    plugins: [
        ['@babel/plugin-proposal-class-properties', {"loose": true}],
        ['@babel/plugin-proposal-decorators',{"legacy": true}],
        "@babel/plugin-transform-runtime"
        ]
}

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

代码校验

eslint安装及配置

npm i eslint eslint-loader -D

然后从 eslint官网上下载相关的配置文件.eslintrc.json

module.exports = {
	module: {
		rules: [ //loader默认是从右向左，从上到下执行
			{
				test: /\.js$/,
				use: {
					loader: 'eslint-loader',
					options: {
						enforce: 'pre'	//使用强制属性，使代码校验最先执行
					}
				}
			}
		]
	}
}