网站 app开发 财务做帐,wordpress产品介绍,目前上海有几个区,wordpress first post3 webpack处理js
webpack的核心——处理js文件#xff0c;将模块化的代码打包。具体操作如下 es6转化#xff08;为兼容老浏览器#xff0c;将es6转化为es5#xff09; babel-loader 代码规范#xff08;例如空格#xff0c;缩进等代码风格规范#xff09; eslint 代码…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-loaderes6仍没有转换为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 ie8 //不需要支持小于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 ie8]}}]]
}即将options移动到.babelrc文件里。
3.2 代码规范——eslint
eslint官网https://eslint.org/eslint的本质 eslint自身不做任何代码规范检查。代码规范是根据团队成员习惯共同达成的规范每个团队的规范不尽相同因此eslint无法做规范。可以使用第三方规范插入eslint即可使用。
3.2.1 版本差异
webpack3-4使用eslint-loader5后废弃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标签引入jsmodule通过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项目启动会报错。报错处理 执行以上命令需要安装webpack-dev-server安装命令npm install webpack-dev-server --save-dev安装成功后执行webpack-dev-server仍报错在 package.json 中添加一个 script 来启动 webpack-dev-server. 执行npm run webpack-dev-server// package.json
scripts: {webpack-dev-server: webpack-dev-server
}执行过程中提示安装webpack-cli 注意需要升级webpack版本 再次执行npm run webpack-dev-server仍有问题不管了
3.2.3 规范
1 extends继承规范
如果一个个写rules很麻烦那么可以继承现成的规范如eslint-config-standardeslint-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标签引入jsmodule通过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标签引入jsmodule通过import引入ecmaFeature: {jsx: true, // 检查jsx代码}},rules: {no-console: 0// 0/off:关闭检查1/warning: 警告2/error: 错误会中断执行}
}p3代码分割和打包似乎没讲.
