vue webpack 脚手架项目详细解析系列（二，项目依赖说明 package

发布时间：2020-12-14 05:03:12 所属栏目：百科来源：网络整理

导读：继续上一篇，上一篇讲了 vue 的webpack脚手架的项目结构。那接下来我们看一下他的package.json 文件，看一下。他都用到了那些依赖。 "dependencies" : { "vue": "^2.5.2" , "vue-router": "^3.0.1" }, "devDependencies" : { "autoprefixer": "^7.1.2" , "b

继续上一篇，

上一篇讲了 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,以及各种plugin组件依赖

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

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

同时注意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，这个插件会对元素的样式进行规范化处理，修正错误和常见的浏览器不一致问题，使用详细的注释来说明代码用途。（详见：https://github.com/csstools/normalize.css）。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!