网站seo入门基础教程书籍博罗网站设计公司

3 webpack处理js

• webpack的核心——处理js文件，将模块化的代码打包。
• 具体操作如下
  • es6转化（为兼容老浏览器，将es6转化为es5）
    • babel-loader
  • 代码规范（例如空格，缩进等代码风格规范）
    • eslint
  • 代码分割和打包（webpack本职工作）
    • webpack的自身核心功能

3.1 es6转化——babel-loader

定义编译配置（options或.babelrc）。

3.1.1 babel-loader写入webpack配置

1 安装babel-loader

step1 安装babel-loader

• babel-loader只是接口，本身不做编译工作（编译使用@babel/core包），因此要安装2个包——babel-loader & @babel/core
• 命令：npm install babel-loader @babel/core --save-dev

–save, 作为开发依赖安装（编译步骤是开发阶段完成的）

loader作用: 定义对某种类型文件的处理方案

2 配置babel-loader

step2 配置babel-loader
loader和use是两个配置方式，对应3种配置方法。

// webpack.config.js
module.exports = {// loadermodule: {rules: [{// 每个对象是一个loadertest: /\.js$/,loader: "babel-loader", // 写法1// use: ["babel-loader", "xxx-loader"],// 写法2 按照数组顺序依次使用loader处理文件// use: { // 写法3 loader配置//    loader: "babel-loader",//    options: {//   }// }}]}
}

打包

打包
不写配置，看打包结果（es5写法是否可转为es6）
打包结果：箭头函数、let还在，说明没有转换为es5.

问题

• 为什么配置了babel-loader，es6仍没有转换为es5呢？
  • 规范
• 采用何种es规范，不同年代有不同标准，目标是什么（支持ie与否）——babel不知要编译到何种程度，于是没有转换。
  • 解决方案：给babel指定编译规范——preset（可理解为集合好的编译规范）
• 项目中常用的preset是@babel/preset-env

3 安装preset

安装preset，命令：npm install @babe/preset-env --save-dev

4 配置preset

配置preset

module.exports = {// loadermodule: {rules: [{// 每个对象是一个loadertest: /\.js$/,// loader: "babel-loader", // 写法1use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env',{targets: {//编译目标browsers: [// 以浏览器为描述目标">1%",// 支持所有占有率>1%的浏览器"last 2 versions",//支持最后2个版本"not ie<=8" //不需要支持小于ie8以前的浏览器]}}]]}}}]}
}

5 打包

执行打包命令：webpack

打包结果：此时es6会编译为es5，可以发现，打包文件没有任何箭头函数或let关键字，说明babel已经生效。

3.1.2 .babelrc

• 通常情况下，babel-loader配置不需要手动配置
• 很多脚手架里会用到.babelrc

将babel-loader的配置移动到.babelrc里，写法如下

.babelrc是json文件，需要遵循json格式。

// webpack.config.js
module.exports = {// loadermodule: {rules: [{// 每个对象是一个loadertest: /\.js$/,// loader: "babel-loader", // 写法1use: {loader: 'babel-loader'}}]}
}

// .babelrc
{"presets": [["@babel/preset-env",{"targets": {"browsers": [">1%","last 2 versions","not ie<=8"]}}]]
}

即，将options移动到.babelrc文件里。

3.2 代码规范——eslint

• eslint官网：https://eslint.org/
• eslint的本质
  • eslint自身不做任何代码规范检查。
  • 代码规范是根据团队成员习惯共同达成的规范，每个团队的规范不尽相同，因此eslint无法做规范。
  • 可以使用第三方规范，插入eslint即可使用。

3.2.1 版本差异

• webpack3-4，使用eslint-loader（5后废弃）
• webpack5，使用eslint-webpack-plugin

以前使用loader，现在改用插件。
配置的写法是相似的。

3.2.2 配置

1 安装eslint

命令：npm install eslint eslint-webpack-plugin --save-dev
需要安装eslint和eslint-webpack-plugin

此两个包的关系与babel-loader和@babel/core类似。

安装失败，提示npm error network ‘proxy‘ config is set properly. See: ‘npm help config‘，参考https://blog.csdn.net/m0_74358570/article/details/141425542

2 注册插件

注意配置文件是node语法。

// webpack.config.js
// 1 引入插件
const eslintplugin = require("eslint-webpack-plugin");
// 2 配置插件
module.exports = {plugins: [new eslintplugin({// 插件配置})]
}

3 配置插件

直接在webpack.config.js配置是可以的，但也可以像.babelrc一样，单独在其他文件——.eslintrc.js里配置。

// webpack.config.js
// 1 引入插件
const eslintplugin = require("eslint-webpack-plugin");
// 2 配置插件
module.exports = {plugins: [new eslintplugin()]
}

// .eslintrc.js
module.exports = {env: {browser: true,// 浏览器环境，可以使用window全局变量，如果是node则不能使用windowes2021: true // 项目es是2021标准},extends: [// 继承规范],plugins: [// 使用插件作为规范],// 解析配置parserOptions: {ecmaVersion: 6, // 指定使用的es版本sourceType: "module", // 模块化实现，默认script引入模块（通过script标签引入js），module：通过import引入ecmaFeature: {jsx: true, // 检查jsx代码}},rules: {"no-console": 0// 0/off:关闭检查，1/warning: 警告，2/error: 错误（会中断执行）}
}

4 rules——eslint检查

• eslint检查主要在开发模式检查，打包不会检查——因此将代码用开发模式启动。
• 命令：webpack-dev-server
• 效果：rules属性的no-console为0，项目启动不会报错（a.js中有console），为2，项目启动会报错。
• 报错处理
  1. 执行以上命令，需要安装webpack-dev-server，安装命令：npm install webpack-dev-server --save-dev
  2. 安装成功后，执行webpack-dev-server，仍报错
  3. 在 package.json 中添加一个 script 来启动 webpack-dev-server. 执行npm run webpack-dev-server

     // package.json
     "scripts": {"webpack-dev-server": "webpack-dev-server"
     }
     

  4. 执行过程中提示安装webpack-cli
     • 注意需要升级webpack版本
  5. 再次执行npm run webpack-dev-server，仍有问题，不管了

3.2.3 规范

1 extends继承规范

• 如果一个个写rules很麻烦，那么可以继承现成的规范，如eslint-config-standard，eslint-config-airbnb，可以安装并继承规范。

以eslint-config-standard为例。

.eslintrc.js内定义的规范优先级要高于继承的eslint-config-standard等规范。
多数项目会继承eslint-config-standard规范。

1 安装命令：npm install eslint-config-standard

安装失败，版本冲突疑似

2 继承规范

// .eslintrc.js
// 修改了extends属性
module.exports = {env: {browser: true,// 浏览器环境，可以使用window全局变量，如果是node则不能使用windowes2021: true // 项目es是2021标准},extends: [// 继承规范"standard"],plugins: [// 使用插件作为规范],// 解析配置parserOptions: {ecmaVersion: 6, // 指定使用的es版本sourceType: "module", // 模块化实现，默认script引入模块（通过script标签引入js），module：通过import引入ecmaFeature: {jsx: true, // 检查jsx代码}},rules: {"no-console": 0// 0/off:关闭检查，1/warning: 警告，2/error: 错误（会中断执行）}
}

2 plugins插件

• plugins，支持特殊语法。
  • 提供额外的rules
  • 提供一套现成的规范

.vue文件，比如要求template内所有的内容需要写在一个div标签内，这样的风格eslint本身的rules没有，那么就需要用到plugins
vue项目会安装eslint-plugin-vue，并且会定义vue特殊的rules，以及继承vue规范。

以eslint-plugin-vue为例
1 安装eslint-plugin-vue，命令: npm install eslint-plugin-vue --save-dev
2 注册插件

// .eslintrc.js
// 修改了extends属性
module.exports = {env: {browser: true,// 浏览器环境，可以使用window全局变量，如果是node则不能使用windowes2021: true // 项目es是2021标准},extends: [// 继承规范"standard","plugin:vue/strongly-recommended" //继承vue的规范],plugins: [// 使用插件作为规范"vue"// 注册插件],// 解析配置parserOptions: {ecmaVersion: 6, // 指定使用的es版本sourceType: "module", // 模块化实现，默认script引入模块（通过script标签引入js），module：通过import引入ecmaFeature: {jsx: true, // 检查jsx代码}},rules: {"no-console": 0// 0/off:关闭检查，1/warning: 警告，2/error: 错误（会中断执行）}
}

p3代码分割和打包似乎没讲.