Vue项目总结（1）-基本概念+Nodejs+VUE+VSCode

一个现代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里有静态初始化的代码（例如：建立一个全局对象），这样会致使屡次执行，产生冲突。

参考：docs.npmjs.com/files/packa…

参考：nodejs.org/dist/latest…

Babel

Babel是一个Javascript编译器，经过插件（ plugin）对处理代码。Babel的插件很是多，用preset表明插件的集合。

插件是npm里的一个包，在Babel的配置文件中直接指定包名。

{
  "plugins": ["babel-plugin-myPlugin"]
}
复制代码

插件的名称若是以babel-plugin-开头，能够省略。

{
  "plugins": ["myPlugin"]
}
复制代码

若是设置了多个插件或preset，执行的顺序是：

1. 插件优先于预制；
2. 插件按从前到后执行；
3. 预制按从后到前执行。

插件和预制均可以指定参数。

{
  "plugins": [["pluginA", {}]]
}
复制代码

参考：babeljs.io/docs/en/bab…

prettier

prettier是一个代码格式化工具，能够设置行宽度、缩进空格数、结尾分号等。

参考：prettier.io/docs/en/opt…

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部分。

参考：eslint.bootcss.com/docs/user-g…

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 开始，能够不用引入一个配置文件。

参考：webpack.js.org

从头设置新项目

从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'
    }
}
复制代码