组件工程配置 eslint、typescript 和 polyfill

前言

更新目录结构

• 根目录创建src文件夹，然后把packages、utils移动到src下，这样跟组件相关的代码统一维护到src下，后续src下可能还会新增如下目录等

  • apis：存放与后端通信的api
  • assets：存放静态资源
  • components：存放公共组件
  • configs：存放项目的配置文件
  • hooks：存放自定义的hooks文件
  • plugins：存放插件的配置文件
  • styles：存放css或scss样式文件
  • types：存放typescript类型声明文件

• 为了让工程正常的运行和打包，需要修改如下文件的引入路径

  • webpack.config.js读取组件入口增加src一层，alias里只保留@对应src目录即可
  • examples/App.vue引入组件的路径从 @p 改为 @/packages
  • examples/main.js的 @e/ 改为 ./
  • src/packages/utils下的两个脚本文件，输出的路径也都需要增加src一层

• 以上更新完后，在终端内无论npm run dev本地启动还是npm run build打包都能正常进行了，后续也会以新的目录结构补充内容

配置eslint

• 安装相关依赖包
  • 基于webpack5配置eslint，首先需要安装 eslint 和 eslint-webpack-plugin

  npm i eslint eslint-webpack-plugin -D
  

  • 配置了babel进行语法转换，所以需要安装 @babel/eslint-parser 解析器

  npm i @babel/eslint-parser -D
  

  • 需要对vue文件进行静态分析，所以需要安装 eslint-plugin-vue 插件

  npm i eslint-plugin-vue -D
  

  • 为了保证eslint规则和prettier的格式化规则保持一致，需要安装 eslint-plugin-prettier 和 eslint-config-prettier

  npm i eslint-plugin-prettier eslint-config-prettier -D
  

• webpack.config.js配置 eslint-webpack-plugin 如下图，初始化时需要传参配置extensions，默认是只对js文件进行检查的，需要添加上vue，后续配置typescript还需要添加ts，其他参数配置可参考github.com/webpack-con…
• 根目录添加 .eslintrc.js 文件，具体配置如下，其他配置可参考eslint.org/

module.exports = {
    // 根目录指示
    root: true,
    // 环境配置
    env: {
        browser: true,
        node: true
    },
    // 继承的规则
    extends: [
        'plugin:vue/essential', // Vue.js相关的必要规则
        'eslint:recommended', // 推荐的ESLint规则
        'plugin:prettier/recommended' // Prettier插件的推荐配置
    ],
    // 解析选项
    parserOptions: {
        parser: '@babel/eslint-parser', // 使用Babel解析器
        requireConfigFile: false // 是否需要配置文件
    },
    // 规则配置
    rules: {
        'no-console': // 禁止console
            process.env.NODE_ENV === 'production'
                ? ['warn', { allow: ['warn', 'error'] }] // 生产环境下，允许警告和报错
                : 'off', // 非生产环境下关闭
        'no-debugger': // 禁止debugger
            process.env.NODE_ENV === 'production'
                ? 'warn' // 生产环境下，允许警告
                : 'off', // 非生产环境下关闭
        'vue/multi-word-component-names': 'off', // Vue组件名使用多个单词时关闭警告
        camelcase: 'off', // 关闭强制驼峰命名
        'no-lonely-if': 'off', // 关闭孤立的if语句的警告
        'no-new': 'off' // 关闭直接使用new操作符创建实例的警告
    },
    // 文件覆盖规则
    overrides: [
        {
            files: ['*.html'], // 匹配HTML文件
            rules: {
                'vue/comment-directive': 'off' // 关闭Vue指令注释的警告
            }
        }
    ]
};

• 根目录添加 .eslintignore 文件，具体配置如下，用来告诉eslint忽略哪些文件和目录

/node_modules
/dist

• 根目录添加 .prettierrc 文件，具体配置如下，用来配置prettier的格式化规则，其他配置可参考prettier.io/docs/en/con…
  • tabWidth：指定缩进大小为几个空格
  • semi：添加分号
  • singleQuote：使用单引号
  • trailingComma：在对象和数组最后一个元素后不添加逗号

{
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none"
}

• 按照上述配置完成后，代码中有问题就会在终端提示报错或警告，如下图所示

配置typescript

• 首先需要安装typeScript编译器和加载器

npm i typescript ts-loader -D

• 在根目录新增配置 ts.config.js，具体配置如下，其他配置可参考www.typescriptlang.org/tsconfig/

{
    "compilerOptions": {
        "baseUrl": ".",
        "allowJs": true,
        "sourceMap": true,
        "skipLibCheck": true,
        "target": "ES5",
        "module": "ESNext",
        "moduleResolution": "Node",
        "esModuleInterop": true,
        "types": ["node"],
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "ES5",
            "DOM"
        ]
    },
    "include": [
        "**/*.ts",
        "**/*.d.ts",
        "**/*.vue",
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

• 目录文件改造
  • examples/main.js 改成 main.ts
  • src/packages/child1/index.js 和 src/packages/child2/index.js 的 index.js 都改成 index.ts
  • src/packages/child1/index.vue 和 src/packages/child2/index.vue 的 script 标签都增加 lang="ts"，如下图
  • src/packages/main.js 改成 main.ts
  • src里新增types文件夹，用于存放typescript类型声明文件；再在types文件夹里新增vue-shim.d.ts文件用于需要声明vue文件，内容如下

    declare module '*.vue' {
        import Vue from 'vue';
        export default Vue;
    }
    

  • src/utils/getAsyncEntries.js 和 src/utils/getSyncEntries.js 里输出组件入口的文件后缀改成 .ts，如下图变化
  • webpack.config.js变化如下图，所有入口 main.js 改成 main.ts，增加解析文件顺序的配置，及添加对 .ts 结尾的文件处理的加载器，特别注意需要配置 appendTsSuffixTo

eslint支持typescript

• 配置完typescript后，还需要重新配置一下eslint，首先需要安装 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

• 更新 .eslintrc.js 如下，其他配置可参考eslint.org/

module.exports = {
    // 根目录指示
    root: true,
    // 环境配置
    env: {
        browser: true, // 浏览器环境
        node: true // Node.js 环境
    },
    // 继承的规则
    extends: [
        'eslint:recommended', // 推荐的ESLint规则
        'plugin:@typescript-eslint/recommended', // TypeScript推荐规则
        'plugin:vue/essential', // Vue.js相关的必要规则
        'plugin:prettier/recommended' // Prettier插件的推荐配置
    ],
    // 解析选项
    parser: 'vue-eslint-parser', // 使用vue-eslint-parser解析器
    parserOptions: {
        parser: '@typescript-eslint/parser', // 使用@typescript-eslint/parser解析器
        ecmaVersion: 2021, // ECMAScript版本
        sourceType: 'module' // 模块类型
    },
    // 插件配置
    plugins: ['@typescript-eslint', 'vue'], // 使用的插件
    // 规则配置
    rules: {
        'no-console': // 禁止console
            process.env.NODE_ENV === 'production' // 生产环境下
                ? ['warn', { allow: ['warn', 'error'] }] // 警告，允许warn和error
                : 'off', // 非生产环境下关闭
        'no-debugger': // 禁止debugger
            process.env.NODE_ENV === 'production' // 生产环境下
                ? 'warn' // 警告
                : 'off', // 非生产环境下关闭
        'vue/multi-word-component-names': 'off', // Vue组件名使用多个单词时关闭警告
        camelcase: 'off', // 关闭强制驼峰命名
        'no-lonely-if': 'off', // 关闭孤立的if语句的警告
        'no-new': 'off', // 关闭直接使用new操作符创建实例的警告
        '@typescript-eslint/no-explicit-any': 'off', // 关闭显示any类型的警告
        '@typescript-eslint/no-this-alias': 'off' // 关闭使用this别名的警告
    },
    // 文件覆盖规则
    overrides: [
        {
            files: ['*.html'], // 匹配HTML文件
            rules: {
                'vue/comment-directive': 'off' // 关闭Vue指令注释的警告
            }
        }
    ]
};

• webpack.config.js增加对ts文件检查

配置polyfill

• 为了兼容老版本的浏览器，还需要引入babel的核心包core-js

npm i core-js -S

• 更新 webpack.config.js 里对js文件解析的配置，具体配置可参考babeljs.io/docs/babel-…

总结

• 如上配置完成之后，就可以直接放到业务工程中使用了，如果想更完善，可以结合husky 和 lint-staged在git提交时做校验，还可以结合Conventional Commits约束git提交信息
• 源码地址