Webpack处理js资源

处理js资源

有人可能会问，js资源Webpack不能已经处理了吗，为什么我们还要处理呢？
原因Webpack对js处理是有限的，只能编译js中ES模块化语法，不能编译其他语法，导致js不能再IE等浏览器运行，所以我们希望做一些兼容性处理。
其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具检测。

• 针对js兼容性处理，我们使用Babel来完成
• 针对代码格式，我们使用Eslint来完成

我们先完成Eslint，检测代码格式无误后，再由Babel做代码兼容性处理。

Eslint

可组装JavaScript和JSX检查工具
这句话的意思就是：它是用来检测js和jsx语法的工具，可以配置各项功能
我们使用Eslint，关键是写Eslint配置文件，里面写上各种rules规则，将来运行Eslint时就会以写的规则对代码进行检查

1、配置文件

配置文件有很多种写法：

• .eslintrc.* :新建文件，位于项目的根目录
• .eslintrc
• .eslintrc.js
• .eslintrc.json
• 区别在于配置格式不一样

package.json和eslintConfig：不需要创建文件，在原有文件基础上写
Eslint会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2、具体配置

.eslintrc.js配置文件为例：

module.exports = {
	// 解析选项
	parserOptions: {},
	// 具体检测规则
	rules: {},
	// 继承其他规则
	extends: [],
	// ...
	// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

1、parserOptions解析选项

parserOptions: {
	ecmaVersion: 6, // ES语法版本
	sourceType: "module", // ES模块化
	ecmaFeatures: { // ES其他特性
		jsx: true // 如果是React项目，就需要开启JSX语法
	}
}

2、rules具体规则

• "off"或0 - 关闭规则
• "warn"或1 - 开启规则，使用警告级别的错误：warn（不会导致程序推出，黄色警告）
• "error"或2 - 开启规则，使用错误级别的错误：error（当被触发的时候，程序会退出，红色警告）

rules: {
	semi: "error", // 禁止使用分号
	'array-callback-return': 'warn', // 强制数组方法的回调函数中有return语句，否则警告
	'default-case': [
		'warn', // 要求switch语句中有default分支，否则警告
		{ commentPattern: '^no default$' } // 允许在最后注释no default，就不会有警告了
	],
	eqeqeq: [
		'warn', // 强制使用 === 和 !==，否则警告
		'smart' // 除了少数情况下不会有警告
	]
}

更多详见文档。规则文档

3、extend 继承
开发中一点点写rules规则太费劲了，所以有更好的办法，继承现有的规则。
现在一下较有名的规则：

• Eslint官方的规则：eslint:recommended
• Vue Cli官方的规则：plugin:vue/esential
• React Cli官方的规则：react-app

module.exports = {
	extends: ['react-app'],
	rules: {
		// 我们的规则会覆盖掉react-app的规则
		// 所以想要修改规则直接改就是了
		eqeqeq: ['warn', 'smart']
	}
}

3、在Webpack中使用
下载包

npm install eslint-webpack-plugin eslint --save-dev

@webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
	//...
	plugins: [new ESLintPlugin({
		// 检测哪些文件
		context: path.resolve(__dirname, "src")
	})]
	//...
}

@eslintrc.js

module.exports = {
	// 继承Eslint规则
	extends: ['eslint:recommended'],
	env: {
		node: true, // 启用node中全局变量
		brower: true // 启用浏览器全局变量
	}，
	parserOptions: {
		ecmaVersion: 6,
		sourceType: "module"
	},
	rules: {
		"no-var": 2, // 不能使用var定义变量
	}
}

忽略检查目录
新建.eslintignore，直接加入对应目录

Babel

JavaScript编译器
主要用于将ES6语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中

1、配置文件

配置文件有很多种写法：

• babel.config.*：新建文件，位于项目根目录
• babel.config.js
• babel.config.json
• .babelrc.*：新建文件，位于项目根目录
• .babelrc
• .babelrc.js
• .babelrc.json
• package.json中babel：不需要创建文件，在原有文件基础上写Babel会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2、具体配置

以babel.config.js配置文件为例：

module.exports = {
	// 预设
	presets: []
}

1、presets预设
简单理解：就是一组Babel组件，扩展Babel功能

• @babel/preset-env：一个智能预设，允许您使用最新的JavaScript。
• @babel/preset-react：一个用来编译React jsx语法的预设
• @babel/preset-typescript：一个用来编译TypeScript语法的预设

3、在Webpack中使用

1、下载包

npm install babel-loader @babel/core @babel/preset-env -D

2、定义Babel配置文件

@webpack.config.js

{
	test: /\.js$/,
	exclude: /node_modules/, // 排除node_modules中的js文件（这些文件不处理）
	loader: 'babel-loader'
}

@babel.config.js

module.exports = {
	// 智能预设，能够编译ES6语法
	presets = ["@babel/preset-env"]
}