一个现代JS Web项目开发环境其实就是一个Nodejs应用，通过使用一系列工具完成开发过程中的各种任务，所以，现在完成一个项目的开发不能只是敲代码，还必须掌握一些现代的工程方法和工具。本文对于常用的一些工具和方法进行简单整理。
基础工具和概念
包管理
通常JS项目的开发都是从安装依赖包开始的，就是执行npm i xxx命令。实际使用中，最好使用cnpm代替npm，速度快很多，出错情况也少。安装时要区分3中情况：dependencies（-S或--save），devDependencies（-D或--save-dev），peerDependencies�。这3种方式都会把包安装在node_modules目录下，但是在package.json中在相应字段对象中。
dependencies是生产环境依赖的包，devDependencies是开发环境依赖的包。如果开发的项目是最终的应用，其实看不出这两种方式有什么区别，但是如果开发的是会被其他项目依赖的库，执行install时，只有dependencies被安装，devDependencies不被安装。
如果自己做的库需要依赖某个包A，但是又不想在被其他项目引用时在自己的目录下安装包A，而是使用项目中的包A，那么就把这个包放在peerDependencies里。这中方式主要是为了解决版本一致性和静态初始化的问题。这个和Nodejs查找node_modules的规则有关，在寻找NPM模块包时，会从当前目录出发，向上搜索各级当中的node_modules文件夹当中的文件，但若有两个同名文件，则遵循就近原则。这样就可能会导致整个应用使用某个包的版本不一致。如果包A里有静态初始化的代码（例如：创建一个全局对象），这样会导致多次执行，产生冲突。
参考：https://docs.npmjs.com/files/package.json
参考：https://nodejs.org/dist/latest-v10.x/docs/api/modules.html
Babel
Babel是一个Javascript编译器，通过插件（ plugin）对处理代码。Babel的插件非常多，用preset代表插件的集合。
插件是npm里的一个包，在Babel的配置文件中直接指定包名。
{
"plugins": ["babel-plugin-myPlugin"]
}
插件的名称如果以babel-plugin-开头，可以省略。
{
"plugins": ["myPlugin"]
}
如果设置了多个插件或preset，执行的顺序是：
- 插件优先于预制；
- 插件按从前到后执行；
- 预制按从后到前执行。
插件和预制都可以指定参数。
{
"plugins": [["pluginA", {}]]
}
参考：https://babeljs.io/docs/en/babel-cli/
prettier
prettier是一个代码格式化工具，可以设置行宽度、缩进空格数、结尾分号等。
参考：https://prettier.io/docs/en/options.html
ESLint
ESLint是一个插件话的Javascript代码检查工具，可以辅助发现代码的语法和格式问题。
cnpm i eslint -D # 安装
eslint --init # 初始化
ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器，例如：Babel-ESLint。
{
"parser": "esprima",
"rules": {
"semi": "error"
}
}
一个环境定义了一组预定义的全局变量。
{
"env": {
"browser": true,
"node": true
}
}
ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}
设置信息可以放在.eslintrc.js文件或者package.json文件中的eslintConfig部分。
参考：https://eslint.bootcss.com/docs/user-guide/configuring/
webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
loader让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript），例如：style-loader，css-loader，file-loader等。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
插件目的在于解决 loader 无法实现的其他事，例如生成html文件（HtmlWebpackPlugin），限制chunk的大小，进行资源替换等。
从 webpack v4.0.0 开始，可以不用引入一个配置文件。
从头设置新项目
从0开始
创建项目目录。
mkdir try-vscode
初始化，创建默认的package.json文件。
npm init -y
在项目目录下创建.vscode/settings.json文件，用于vscode的项目本地化设置。
{
"editor.detectIndentation": false,
"editor.tabSize": 2
}
设置代码格式化
安装插件Prettier - Code formatter
创建.prettierrc文件
{
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"printWidth": 120
}
也可以将这些设置放在.vscode/settings.json中。
{
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.printWidth": 120,
"prettier.tabWidth": 2
}
代码检查
安装（如果已经进行了全局安装可以不进行本地安装）
cnpm i eslint -S
初始化配置文件.eslintrc.js
npx eslint --init
按提示进行选择
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser, Node
? What format do you want your config file to be in? JavaScript
设置完成后，在VSCode的代码窗口和problem窗口中就会提示发现的错误。
发布npm包
需要在npmjs.com注册账号，然后通过npm adduser命令添加账号到本地。
在项目根目录下执行命令。
npm publish
发布包的内容在package.json文件中定义，主要的字段包括：name，version，files，main，module等。如果package.json中存在 module 字段，会优先使用，如果没找到对应的文件，则会使用 main 字段，并按照 CommonJS 规范打包。每一次发布包必须升级版本号，不能直接更新已有版本。
VUE项目
如果VUE的前端项目，最好直接用vue-cli创建项目，这样就不用单独安装依赖包了。
vue-cli create try-vscode
项目创建成功后，会生成package.json和vue.config.js文件（创建项目过程中可以将其他设置指定为独立的文件）。
如果项目的目录结构比较复杂，引用代码的层级较深，可以考虑在vue.config.js文件中设置别名。
chainWebpack: config => {
config.resolve.alias.set('@', resolve('./'))
}
jest.config.js
{
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1'
}
}
网友评论