Vue项目配置文件整理

一、.babelrc

1、文件简介1

配置Babel的文件
基本格式：

{
  "presets":[], // 预设: 语法转译器/jsx,flow,TypeScript 等插件转译器
  "plugins":[]  // 插件: API 和全局对象转译器
}
1
2
3
4

Babel有三种配置方式：

1）创建babel.config.js文件进行配置
2）创建.babelrc文件进行配置
3）通过package.json文件中的babel字段进行设置

2、项目功能

{
    "presets": [
        "@vue/cli-plugin-babel/preset"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}
1
2
3
4
5
6
7
8

@vue/cli-plugin-babel/preset2 ：

vue-cli特有的Babel插件，是vue-cli项目的默认Babel预设，也只能用在vue-cli脚手架搭建的项目中。

node_modules中内容为：

module.exports = require('@vue/babel-preset-app')
1

所有的vue-cli应用都使用@vue/babel-preset-app，它是对 @babel/preset-env等转译库的重新封装，且依赖于.browserslistrc文件的配置（也就是package.json中的browserslist字段）。

@babel/plugin-transform-runtime3 4：

Babel 在转译的过程中，对 syntax 的处理会使用到 helper 函数，对 api 的处理会引入 polyfill。

默认情况下，Babel 在每个需要使用 helper 的地方都会定义一个 helper，导致最终的产物里有大量重复的 helper；引入 polyfill 时会直接修改全局变量及其原型，造成原型污染。

故该转译包将 helper 和 polyfill 都改为从一个统一的地方引入，并且引入的对象和全局变量是完全隔离的，从而解决上述两个问题。

3、小结

可迁移到package.json

二、.editorconfig

1、文件简介1 2

统一编码风格的文件，使用vscode编辑器需要安装editorConfig插件此文件才生效，优先级比编辑器自身的设置要高

要保持和lint配置相符，否则格式化代码以后不能通过代码校验工具的检验

2、项目功能

root = true                      // 表示是最顶层的配置文件，否则会继续向父目录找editorconfig文件
​
[*]                              // 匹配所有文件
charset = utf-8                  // 设置编码
indent_style = space             // 设置缩进风格(tab是硬缩进只占一个字符，space为软缩进)
indent_size = 2                  // 设置缩进宽度
end_of_line = lf                 // 设置换行符
insert_final_newline = true      // 文件会以一个空白行结尾  
trim_trailing_whitespace = false // 不去除换行行首的任一空白字符
1
2
3
4
5
6
7
8
9

3、小结

总的能配置的内容差不多就这么多，且一直并没有下载插件所以根本没有用到

可考虑将必要的放到.prettierrc后删去

三、.eslintignore

1、文件简介1

eslint+ignore，告诉 ESLint 去忽略特定的文件和目录

.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测

定义方式：

1）根目录创建.eslintignore 文件
2）在 package.json 文件中加入 eslintignore 字段
3）两者可同时存在但.eslintignore 文件优先级更高

2、项目功能

/dist/                   // 忽略.gitignore文件同目录下（即根目录下）的dist文件夹下的所有目录，当前无这个文件夹
/*.js                    // 忽略根目录下所有的js文件
/test/unit/coverage/     // 忽略根目录下的test/unit/coverage文件夹下的所有目录，当前无这个文件夹
jquery.fileDownload.js   // 忽略此命名的文件
/.ci/                    // 忽略根目录下的.ci文件夹下的所有目录
/static/lib              // 忽略根目录下static/lib下的所有目录
1
2
3
4
5
6

3、小结

/dist/与/test/unit/coverage/ 删除

四、.eslintrc.js

1、文件简介1

配置eslint代码格式和代码质量校验的文件，

eslint有四种配置方式：

1）.eslintrc.js
2）.eslintrc.yaml
3）.eslintrc.json
4）package.json eslintConfig

可叠加配置，距离近者优先级高，4）优先级最低

2、项目功能

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/essential',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  globals: {
    $: true,
    _: true,
    moment: true,
    Highcharts: true,
    XLSX: true,
  },
  rules: {
    camelcase: 0,
    'prefer-const': 0,
    'arrow-body-style': 0,
    'no-new': 1,
    'new-cap': 0,
    'prefer-destructuring': 0,
    'no-underscore-dangle': 0,
    'func-style': 0,
    'no-console': ['error', { allow: ['log', 'warn', 'error'] }],
    'no-unused-vars': ['error', { vars: 'all', args: 'none', ignoreRestSiblings: false }],
    'max-len': 1,
    'no-useless-escape': 0,     // 允许在字符串、模板字面量和正则表达式中使用转义符
    'no-mixed-operators': 0,    // 可以混合使用不同的操作符，比如加号和乘号
    'operator-linebreak': 0,    // 允许操作员不强制使用一致的换行符样式
    'newline-per-chained-call': 0,
    'max-len': 0,
    'no-else-return': 0,
    'no-param-reassign': 0,
    'import/prefer-default-export': 0,
    'no-restricted-syntax': 0,
    'no-loop-func': 0,
    eqeqeq: 0,
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

env：指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。比如node环境下有global全局变量，browser环境下有window全局变量，jquery环境下有$全局变量，es6环境下有Set等新特性全局变量

extends：集成的配置方案，可以看成plugins+rules

plugins：加载一些用于补充规则的插件。可省略前缀 eslint-plugin-

rules：配置eslint默认提供的可选规则和插件里需要的规则。

"off"或0- 关闭规则

"warn"或1- 开启规则，使用警告级别的错误：warn(不会导致程序退出)

"error"或2- 开启规则，使用错误级别的错误：error(当被触发的时候，程序会退出)

parserOptions：用来设置支持的ECMAScript语言版本。这里12是ES2021的意思

globals：配置一些全局变量。赋值writable/true允许重写，readonly/false不允许重写

3、小结

保留

五、.gitignore

1、文件简介1

git+ignore，使在提交代码时忽略列出的相关文件

2、项目功能

.DS_Store
node_modules/
dist/
target/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
eslint.html
​
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、小结

dist/、target/ 可删去

六、.huskyrc.js、.lintstagedrc.js、commitlint.config.js

1、文件简介1 2

.huskyrc.js是 Husky 的配置文件，通过安装 Husky 把配置文件和 Git Hook 关联从而在团队中使用 Git Hook，当前版本Husky4

.lintstagedrc.js是 git add 内容代码格式校验的配置文件

commitlint.config.js 是 commit 信息格式校验的配置文件

2、项目功能

// .huskyrc.js
module.exports = {
  "hooks": {
    "pre-commit": "lint-staged",
    'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS'
  }
}; 
​
// .lintstagedrc.js
module.exports = {
  '*.{js,vue,ts}': 'eslint --fix',
};
​
// commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

git commit执行前进行代码格式校验，

pre-commit：git add 内容代码格式校验

               '*.{js,vue,ts}': 'eslint --fix'： 自动修复 js,vue,ts 文件并提交更改
1

commit-msg：commit 信息格式校验

               '@commitlint/config-conventional'： 校验 commit 信息风格的组件
1

3、小结

1）考虑当前Husky版本为4，可以将三个文件合并到package.json中，

2）或者更新版本如Husky8，这三个文件将可以合并在一个 .husky 文件夹中

七、.postcssrc.js

1、文件简介1 2

PostCSS 的主要功能：

把 CSS 解析成 JavaScript 可以操作的 AST
调用插件来处理 AST 并得到结果

2、项目功能

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}

1
2
3
4
5
6
7

“autoprefixer” 将基于当前浏览器范围为 transform 等css样式加上浏览器前缀

浏览器范围在 package.json 中的 browserslist 字段

3、小结

可迁移至package.json

八、.prettierrc.js

1、文件简介1 2

代码格式的校验，eslint+–fix 也可以进行代码格式的校验和自动格式化，但 Prettier 更擅长

Prettier 可能与 ESLint 冲突

2、项目功能

module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'avoid',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: 'lf',
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

3、小结

保留

但由于与 ESLint 可能冲突，解决冲突的方式：

一是禁掉 ESLint 中与 Prettier 冲突的规则，然后使用 Prettier 做格式化， ESLint 做代码校验

二是只使用禁掉了冲突规则的 ESLint，将 Prettier 作为插件加到 .eslintrc.js 使得 eslint --fix 可以既处理代码格式问题又处理代码质量问题

九、build.boot

1、文件简介1 2

函数式编程clojure基于boot构建应用程序，build.boot是boot环境默认的配置文件

2、项目功能

(set-env!
  :dependencies '[[org.clojure/clojure "1.8.0"]
                  [org.clojure/tools.logging "0.3.1"]
                  [erp-boot/boot-gramel "1.0-SNAPSHOT" :scope "test"]])
​
​
(require '[boot.gramel :refer :all])
​
(set-env!
  :project 'erp.webapps/xxx
  :version "0.1.0-SNAPSHOT"
  :resource-paths #(conj % "dist"))
1
2
3
4
5
6
7
8
9
10
11
12

一般结构如下，通过下载 pom、jar 完成构建，而项目文件里没有这样的 task-options! 操作，且依赖的 erp-boot/boot-gramel 或者是自定义的 boot.gramel 任务文件无迹可寻，resource-paths 的 dist 目录也不在项目里 ，猜测是最初搭建数全通项目SNAPSHOT开发版本时用于提供运行时环境，但现在是否使用还有待考证

(set-env!
  :resource-paths #{"src"}
  :dependencies '[[me.raynes/conch "0.8.0"]])
​
(task-options!
  pom {:project 'my-project
       :version "0.1.0"}
  jar {:manifest {"Foo" "bar"}})
1
2
3
4
5
6
7
8

3、小结

若当前未使用到可删除

十、jsconfig.json

1、文件简介1 2

在根目录创建 jsconfig.json 文件，使得 vs code 能将 jsconfig.json 所在的 javascript 项目视作一个整体做智能代码提示

2、项目功能

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
      "@/*": [
        "src/*"
      ]
    },
    // 解决prettier对于装饰器语法的警告
    "experimentalDecorators": true,
    // 解决.jsx文件无法快速跳转的问题
    "jsx": "preserve"
  },
  "vueCompilerOptions": {
    "target": 2.7,
    "plugins": [
      // vscode支持pug
      "@volar/vue-language-plugin-pug"
    ]
  },
  //提高 IDE 性能
  "exclude": [
    "node_modules",
    "dist",
    "build",
    "docker",
    "config"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3、小结

保留

十一、webpack.dll.js

1、文件简介1

利用 DllPlugin 插件的 webpack 打包优化策略生成的dll文件

把公共库打包成一个单独的库文件，每次只需打包业务代码，减少公共打包的时间，提升整体速度

2、项目功能

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');
const RemoveNgGridMissingLicenseErrorPlugin = require('./build/RemoveNgGridMissingLicenseErrorPlugin');
​
module.exports = {
  mode: 'production',
  // JS 执行入口文件
  entry: {
    dll_vendor: [
      'ag-grid-vue',
      'ant-design-vue',
      'vue-router',
      'vuex',
      'axios',
      'vue-resource',
      'tinymce',
      'tinymce/themes/silver',
      'tinymce/plugins/table',
      'tinymce/plugins/lists',
      'tinymce/plugins/link',
      'tinymce/plugins/image',
      'tinymce/plugins/imagetools',
      'tinymce/plugins/media',
      'tinymce/plugins/code',
      'tinymce/plugins/codesample',
      'tinymce/plugins/anchor',
      'tinymce/plugins/emoticons/js/emojis.min',
      'tinymce/plugins/emoticons',
      'tinymce/plugins/wordcount',
      'tinymce/plugins/preview',
      'tinymce/plugins/fullpage',
      'tinymce/plugins/fullscreen',
      'tinymce/plugins/paste',
      'ag-grid-community',
      'ag-grid-enterprise',
      'cos-js-sdk-v5',
    ],
  },
  output: {
    // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
    // 也就是 entry 中配置的 react 和 polyfill
    filename: '[name].dll.js',
    // 输出的文件都放到 dist 目录下
    path: path.resolve(__dirname, 'static/lib/dll'),
    // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
    // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
    library: '_dll_[name]',
  },
  plugins: [
    new RemoveNgGridMissingLicenseErrorPlugin(),
    // 接入 DllPlugin
    new DllPlugin({
      // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
      // 例如 react.manifest.json 中就有 "name": "_dll_react"
      name: '_dll_[name]',
      // 描述动态链接库的 manifest.json 文件输出时的文件名称
      path: path.join(__dirname, 'static/lib/dll', '[name].manifest.json'),
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

entry: 配置要打包的公共库文件
output: 文件输出配置，其中filename是文件的打包输出名称，path是输出的路径，library是打包后库的名称
plugins: webpack插件，这里使用DllPlugin将dll_vendor里的库文件打包成dll文件，其中，name是库的名称和output.library要保持一致，path是dll文件的映射json，作用是映射库名称和他对应的node_module里的路径

3、小结

保留

十二、其他

index.html

整个项目的入口，保留

package-lock.json

锁定安装模块的版本号，保留

package.json

配置信息，保留

README.md

说明文档，保留