vue webpack 脚手架项目详细解析系列(二,项目依赖说明 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, 以及各种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)。

原文地址:https://www.cnblogs.com/qufanblog/p/10346094.html

时间: 2024-11-05 12:35:45

vue webpack 脚手架项目详细解析系列(二,项目依赖说明 package.json)的相关文章

ABP vue+asp.net core yarn serve报 Cannot find module &#39;typescript/package.json错误

abp的前端在node install 安装完成了相关的依赖包,直接yarn serve运行相关服务的时候报"Cannot find module 'typescript/package.json"这个异常 这个时候只需要执行 yarn install 可以了 ABP vue+asp.net core yarn serve报 Cannot find module 'typescript/package.json错误 原文地址:https://www.cnblogs.com/albert

Telegram学习解析系列(二):这我怎么给后台传输数据?

写在前面: 在iOS开发的过程中,有很多时候我们都在和数据打交道,最基本的就是数据的下载和上传了,估计很多很多的小伙伴都在用AFNetworking与后台数据打交道,可有没有想过,哪天AFNetworking你不能用了或者不会用了怎么办?可能你心中疑惑了,这三方只要更新,存在怎么会不能用或者我怎么会不会用了,在没有看Telegram源码之前,我也是这么想的,看了Telegram源码就不会再这么想了,以后我会把自己看的Telegram源码部分的总结和经验一点点的整理分享出来,整理成这个Telegr

linux中的压缩命令详细解析(二)

我们在<Linux中的压缩命令详细解析(一)>中已经讲解了常见的三种压缩命令,下面我们开始讲解工作中最常用到的tar命令. 为了使压缩和解压缩变得简单,tar命令就应运而生了.那么究竟该如何使用呢? tar.gz格式: 压缩命令: tar -zcvf 压缩文件名 源文件名 举例: 把abc文件压缩成后缀为tar.gz格式的文件 tar -zcvf abc.tar.gz abc 解压缩命令: 举例:解压缩abc.tar.gz文件 tar -zxvf abc.tar.gz tar.bz2格式: 压

大家来一起开发HTML5项目如何【系列二】

之前出系列一,大家都没能积极响应,心里有点小失落.再加上年底公司事情比较多,就一直搁着,昨天开始继续研究,算是取得了一些进步, 不过又遇到了新的瓶颈.接下来就跟大家分享下这两天的成果吧. 系列一中确定了思想,主要从以下几个方面着手, 1.用HTML5调用摄像头,进行拍照. 2.将拍照获取的图像数据流传到后台进行解析. 3.返回数据,如果解析不成功继续解析,知道解析成功为止. 第一步已经在我的博客中有了. http://blog.csdn.net/laijieyao/article/details

iBatis.Net系列(二)-项目类型

在这个项目中我们分2层来进行,一个web层,一个model层,web层引用model层,我们主要用到IBatisNet.DataMapper.dll和IBatisNet.Common.dll这2个文件,在model层添加引用后项目的结构如下 在这个项目中我们使用数据库中的2张表来做测试,结构如下 附上sql语句,方便偷懒的同学对着看CREATE TABLE [dbo].[student]( [id] [int] IDENTITY(1,1) NOT FOR REPLICATION NOT NULL

Android 开源项目android-open-project解析之(二) GridView,ImageView,ProgressBar,TextView

五.GridView StaggeredGridView 同意非对齐行的GridView,类似Pinterest的瀑布流.而且跟ListView一样自带View缓存,继承自ViewGroup 项目地址:https://github.com/maurycyw/StaggeredGridView Demo地址:https://github.com/Trinea/TrineaDownload/blob/master/staggered-gridview-demo.apk?raw=true APP演示样

Tomcat总体架构(Tomcat源码解析系列二)

Tomcat即是一个HTTP服务器,也是一个servlet容器,主要目的就是包装servlet,并对请求响应相应的servlet,纯servlet的web应用似乎很好理解Tomcat是如何装载servlet的,但,当使用一些MVC框架时,如spring MVC.strusts2,可能就找不出servlet在哪里?其实spring MVC框架就是一整个servlet,在web.xml中配置如下: <!-- Spring MVC servlet --> <servlet> <se

webpack 多页应用架构系列实战

阅读目录 1.webpack配置了解 2.webpack CommonsChunkPlugin公共代码剥离 3.了解ProvidePlugin的用途 回到顶部 1.webpack配置了解 webpack的配置文件是一个nodejs的module,使用CommonJS风格来编写的,比如如下: module.exports = { entry: './index', output: { path: __dirname + '/dist', filename: 'bundle.js' } } webp

(转)ETL利器Kettle实战应用解析系列一【Kettle使用介绍】

原文地址:http://www.cnblogs.com/limengqiang/archive/2013/01/16/KettleApply1.html 本系列文章主要索引如下: 一.ETL利器Kettle实战应用解析系列一[Kettle使用介绍] 二.ETL利器Kettle实战应用解析系列二 [应用场景和实战DEMO下载] 三.ETL利器Kettle实战应用解析系列三 [ETL后台进程执行配置方式] 本文主要阅读目录如下: 1.Kettle概念 2.下载和部署 3.Kettle环境配置 4.K