vue 脚手架(二,项目依赖说明 package.json)

继续上一篇,

上一篇讲了 vue 的webpack脚手架的项目结构。那接下来我们看一下他的package.json 文件,看一下。他都用到了那些依赖。

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  }
...
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

这里我这截取了依赖定义部分和browserslist配置部分,其他的部分我没有贴出来。

这里同时说一下主要的依赖和不是那么必要的依赖。我不会去介绍这些依赖的具体用法,我只是介绍一下这些依赖都是做什么工作的。具体用法官网或网上都有详细的教程。

主要依赖:webpack, babel, eslint, 以及各种loader、plugin组件依赖

webpack 已经是比较主流的项目构建工具了,这里就不多说了。绝大多数项目都是用的这个工具。(起码我是,手动滑稽)。

babel,这个就厉害了。babel主要用来将ES6或更高级的语法转译成主流浏览器可以执行的ES5代码。毕竟理论是始终领先于实践的吗,对吧。各个主流浏览器对ES6的支持度并不是多好。所以,适当的降级就在所难免了。但是要是真的用ES5的标准写代码,那ES6带来的诸多语法糖,语言拓展和异步解决方式就真的没法用了。所以,babel问世了。

这里注意一下

"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",

这几个依赖。通过这几个依赖,vue拥有了使用JSX语法的能力,这个在vue的官方文档中也有介绍。

同时注意babel-preset-env这个插件。这是为babel提供了一个目标环境。这个插件依赖于browserslist,根据browserslist提供的各个目标环境对于新语法的支持程度来为babel编译器提供参考。比如上述的配置文件的browserslist配置部分中,“not ie <=8” 就告诉了babel编译器编译出来的代码不用考虑对IE8及以下版本的支持。

那再说一下这个browserslist。这个是一个对项目的目标环境的描述列表,不说浏览器是因为可能目标环境是Electron等非浏览器环境。这个列表的语法我就不介绍了。很简单,这个browserslist的意义就是为其他的依赖或模块提供了一个目标环境参考,比如我上面说的,要不要支持IE8等。官网在此:https://github.com/browserslist/browserslist#queries

依赖于这个browserslist的主要有5个:Autoprefixer, babel-preset-env ,eslint-plugin-compat, stylelint-no-unsupported-browser-features 和 postcss-normalize

挨个说一下吧。正好这个脚手架的依赖中也有。

babel-preset-env,这个刚说过

Autoprefixer,这个是用来处理浏览器前缀的问题(人如其名,英文直译就是:自动前缀修复器)。比如想用Flex布局的话,需要为不同的浏览器加前缀。使用了Autoprefixer,你就按照CSS3的标准写法写就可以了。Autoprefixer会为你加上不同的前缀。

eslint-plugin-compat,这个是Eslint的插件,他会帮你检查你使用的ES新特性对于你的browserslist来说是不是太新了,甚至至于根本不支持。

stylelint-no-unsupported-browser-features,类似于eslint-plugin-compat,会帮你检查css的新特性browserslist浏览器是否支持。

postcss-normalize,这个插件会对元素的样式进行规范化处理,修正错误和常见的浏览器不一致问题,使用详细的注释来说明代码用途。详见官方文档

Eslint: 这个也厉害了。这个一个JavaScript和JSX的代码检查工具,并且拥有高度的可配置能力。官方也贴出了所有的可配置列表。有了这个插件。我们可以基本上统一代码的书写风格。这对中大型项目以及代码的拓展是十分有利的,官方文档

*-loader各种loader,webpack使用,这个在webpack的文档中有详细的介绍,这里不再重复说明了,等有时间再写篇对webpack的介绍文章。

*-plugin 各种plugin。和loader一样,也是webpack的插件。

不必要依赖:(之所以说他是不必要的是说不用他也可以,但是用了它更好一些,比如shelljs,你也可以不用他,直接写shell。)

chalk:这是一下用来增强node控制台输出的工具,可以实现彩色化输出。

ora:实现了控制台进度条功能。

rimraf:实现了shell的 rm -rf 功能。递归删除一整个目录

sermver:这个是对语义化版本号的管理,检查工具。可以参考官方文档

shelljs:这个工具在node环境下用函数方式实现了linux shell 中的一些基础命令。shell.rm('-rf', 'out/Release') 等于 rm -rf out/Release

portfinder: 这个工具用于发现一个还没有被占用的端口。因为我们经常使用的80,8080 端口都有相应的别的应用也可能会使用。当这些端口被占用时,可以发现一个新的端口以供使用。

本文总阅读量