Vue项目配置文件整理
一、.babelrc
1、文件简介1
配置Babel的文件
基本格式：
{
"presets":[], // 预设: 语法转译器/jsx,flow,TypeScript 等插件转译器
"plugins":[] // 插件: API 和全局对象转译器
}
Babel有三种配置方式：
1）创建babel.config.js文件进行配置
2）创建.babelrc文件进行配置
3）通过package.json文件中的babel字段进行设置
2、项目功能
{
"presets": [
"@vue/cli-plugin-babel/preset"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
@vue/cli-plugin-babel/preset2 ：
vue-cli特有的Babel插件，是vue-cli项目的默认Babel预设，也只能用在vue-cli脚手架搭建的项目中。
node_modules中内容为：
module.exports = require('@vue/babel-preset-app')
所有的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 // 不去除换行行首的任一空白字符
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下的所有目录
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,
},
};
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
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'] };
git commit执行前进行代码格式校验，
pre-commit：git add 内容代码格式校验
'*.{js,vue,ts}': 'eslint --fix'： 自动修复 js,vue,ts 文件并提交更改
commit-msg：commit 信息格式校验
'@commitlint/config-conventional'： 校验 commit 信息风格的组件
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": {}
}
}
“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',
};
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"))
一般结构如下，通过下载 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"}})
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"
]
}
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'),
}),
],
};
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
说明文档，保留