一、编译期间代码检测
1 引入
fork-ts-checker-webpack-plugin检查ts类型
2 引入eslint检查代码可能存在的问题
yarn add fork-ts-checker-webpack-plugin --dev
yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
3 项目根目录下面新增.eslinrc.js文件，内容如下：
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
extends: ['plugin:@typescript-eslint/recommended'],
rules: {
// place to specify ESLint rules - can be used to overwrite rules specified from the extended configs
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
};
二、全局样式变量使用
- 引入
sass-resources-loader
yarn add --dev sass-resources-loader
在webpack.dev.js 文件中添加如下一条规则rule，代码如下：
{
test: /\.less$/i,
use: [
'vue-style-loader',
'css-loader',
'postcss-loader',
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/color.less'),
},
},
],
},
三、vue模版中代码的检测
- 以上只是针对.js .ts文件类型的检测，那么基于vue开发的话，需要对.vue文件的代码进行检测，避免一些错误。
- eslint-plugin-vue插件该粉墨登场了。
- 安装
eslint-plugin-vue插件
yarn add --dev eslint-plugin-vue- 修改
.eslintrc.js配置文件
module.exports = {
// parser: '@typescript-eslint/parser',
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2018,
sourceType: 'module',
},
extends: [
'plugin:vue/essential',
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
],
rules: {
// 0 = off, 1 = warn, 2 = error
// place to specify ESLint rules - can be used to overwrite rules specified from the extended configs
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unused-vars': 0,
// https://eslint.vuejs.org/rules/
'vue/component-definition-name-casing': 'off',
'vue/multi-word-component-names': 'off',
},
};
四、完结，最后的总结：
- 本项目基于的技术栈是 webpack@5.60 + vue@2.6以上。
- 该配置打包工具主要是用于老项目由
vue + js开发升级到vue + ts开发的一个过渡阶段产物,目前该套打包脚手架已经在实际工作项目使用中，老项目是基于vue-cli生成的项目，webpack版本为 3.6的，当时尝试着在3.6版本的基础上进行升级，由于各种loader之间的兼容问题，最终放弃，尝试使用webpack5进行升级改造。- 打包工具输出的js文件由以下几部分组成：
3.1. 第三方库单独抽离出来供其他页面使用
3.2. 对于多个模块用到的大文件，单独打包成一个chunk，
3.3. 抽离运行时代码。- 代码仓库地址：https://github.com/YiGeXiaoBing-520/vue-manual.git
克隆代码后，切换至第七期对应的分支
第七期分支代码： develop-v7；- 持续研究输出中....
