阅读 460

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.jsonvue.config.js文件(创建项目过程中可以将其他设置指定为独立的文件)。

如果项目的目录结构比较复杂,引用代码的层级较深,可以考虑在vue.config.js文件中设置别名。

chainWebpack: config => {
    config.resolve.alias.set('@', resolve('./'))
  }
复制代码

jest.config.js

{
  moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/$1'
    }
}
复制代码

#本系列其他文章

Vue项目总结(2)-前端独立测试

Vue项目总结(3)-跨域问题分析

Vue项目总结(4)-API+token处理流程