本文主要从一个上线项目的packge.json分析一个上线项目中常见的插件以及为什么会引入这些插件。
通过这些配置介绍，你可以去优化已有的项目或者找到解决棘手问题的灵感
{
"name": "bimserver-admin",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "wbjqiqi",
"private": true,
"scripts": {-------------------------script中是我们在npm中输入的npm run * 所执行的对应的node命令
"dev": "node build/dev-server.js", => npm run dev 相当于执行 => node build/dev-server.js
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {------------------------------npm run build 打包的时候依赖的插件
"axios": "^0.16.2", => 一款封装了一些ajax方法的插件，类似于jquery中的ajax封装。与此类似的插件还有vue-resource
"commander": "^2.11.0", => 获取命令行中用户输入的参数，从而执行不同的打包方式。
在命令行中输入参数的方式为 npm run dev -- -p => 参数为-p
"element-ui": "^1.4.3", => vue的一款ui插件，封装了一些常见的ui，类似于jquery和jquery-ui的关系
"vue": "^2.3.3",
"vue-loader": "^12.2.2", => 识别我们写的.vue后缀的文件，将这些文件转化成js
"vue-logger": "^0.0.2", => 控制台输出的一个插件，让我们在控制台中输出的信息更多元化
"vue-router": "^2.6.0", => vue中路由跳转的插件
"vuex": "^2.3.1" => vue中存储一些所有文件中都能获取和控制的变量和方法
},
"devDependencies": {-------------------------------npm run dev 开发环境测试的时候依赖的插件
"@types/node": "^8.0.25",
"@types/webpack": "^3.0.10",
"@types/webpack-env": "^1.13.0",
"autoprefixer": "^7.1.2", => 自动给我们的css代码添加浏览器兼容性，用法，在webpack中css规则使用postcss-loader
module.exports = {
module: {
rules: [ { test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"]}
}
plugins: [require('autoprefixer')]
}
"axios": "^0.16.2",
"babel-core": "^6.22.1",------------------------------------------------------
"babel-eslint": "^7.1.1", |
"babel-loader": "^7.1.1", |
"babel-plugin-istanbul": "^4.1.1", |
"babel-plugin-transform-runtime": "^6.22.0", |=>babel转码换，将一种语法转换成另一种语法
"babel-preset-env": "^1.3.2", |例如es6=>es5,在.babelrc中配置
"babel-preset-es2015": "^6.24.1", |
"babel-preset-stage-2": "^6.22.0", |
"babel-register": "^6.22.0",--------------------------------------------------
"body-parser": "^1.17.2", => node搭建服务端时，将前端请求体中的内容规则化
搭配express组件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
"chai": "^3.5.0", => 用于自动化测试脚本开发 断言库（assert,expect,should）
"chalk": "^2.0.1", => 粉笔，在命令行报彩色错误，炫酷吧
"chromedriver": "^2.27.2", => e2e测试的时候使用，可以浏览器自动测试你的代码效果是否正确（用户的角度）
"connect-history-api-fallback": "^1.3.0", => vue路由实现的基础，识别url中的’/user‘等，没有会产成404错误
"copy-webpack-plugin": "^4.0.1", => 拷贝资源和文件夹到打包目录
"cross-env": "^5.0.1", -------------------------------------------
| => 解决跨平台设置NODE_ENV的问题
"cross-spawn": "^5.0.1",-------------------------------------------
"css-loader": "^0.28.5",
"cssnano": "^3.10.0", => css代码的压缩，去除一些无用的空格
"element-ui": "^1.4.3", => 同生产环境
"eslint": "^3.19.0",----------------------------------------------------------
"eslint-config-standard": "^6.2.1", |
"eslint-config-vue": "^2.0.2", |
"eslint-friendly-formatter": "^3.0.0", | => 设定一些大家都喜欢的代码格式，方便大多人
"eslint-loader": "^1.7.1", |看代码
"eslint-plugin-html": "^3.0.0", |
"eslint-plugin-promise": "^3.4.0", |
"eslint-plugin-standard": "^2.0.1",-------------------------------------------
"eventsource-polyfill": "^0.9.6", => 实现浏览器的热更新
"express": "^4.14.1", => 封装了一些node写服务端的api
"extract-text-webpack-plugin": "^2.0.0", => 将我们在.vue中写的内联样式提取到单独的css文件中
"file-loader": "^0.11.1", => 读取文件
"friendly-errors-webpack-plugin": "^1.1.3", => 将我们报的错分类整理在命令行上显示
"html-webpack-plugin": "^2.28.0", => 压缩打包html文件
"http-proxy-middleware": "^0.17.3", => node服务端的代理插件，让代码在服务端跑起来
"inject-loader": "^3.0.0", => webpack找到我们的文件引用的文件，一并打包
"karma": "^1.4.1",-------------------------------------------------------------
"karma-coverage": "^1.1.1", |
"karma-mocha": "^1.3.0", |
"karma-phantomjs-launcher": "^1.0.2", |
"karma-phantomjs-shim": "^1.4.0", | => 调用selenium-server,进行代码的unit测试
"karma-sinon-chai": "^1.3.1", |
"karma-sourcemap-loader": "^0.3.7", |
"karma-spec-reporter": "0.0.31", |
"karma-webpack": "^2.0.2",-----------------------------------------------------
"less": "^2.7.2",
"less-loader": "^4.0.5",
"lolex": "^1.5.2", => 封装了一些定时器的api，在测试框架中使用。
此外，在浏览器环境中，lolex提供了一个performance从时钟开始的实现。
在节点环境中，lolex提供了nextTick与时钟同步的实现，以及与时钟一起使用的process.hrtime垫片。
"mocha": "^3.2.0", => js测试框架
"nightwatch": "^0.9.12", => 类似与karma，在vue-cli中，e2e使用的该插件
"opn": "^5.1.0", => 跨平台打开资源
"optimize-css-assets-webpack-plugin": "^2.0.0", => css打包插件，调用cssnano
"ora": "^1.2.0", => node中彩色图标的输出
"phantomjs-prebuilt": "^2.1.14", => 调用浏览器的unit测试用到
"rimraf": "^2.6.0", => 节点的UNIX命令 rm -rf
"sass-loader": "^6.0.6",
"scss-loader": "^0.0.1",
"selenium-server": "^3.0.1", => 将JavaScript代码注入到浏览器中测试代码（自动化）
"semver": "^5.3.0", => 可以判定当前npm/webpack/node...的版本是否大于自己想要的版本
"shelljs": "^0.7.6", => 调用shell命令
"sinon": "^2.1.0", ----------------
| => 用于JavaScript的unit测试，存根和模拟。适用于任何单元测试框架。
"sinon-chai": "^2.8.0",------------
"string-replace-loader": "^1.3.0", =>替换字符串工具，可以在webpack打包前将源文件中某一些可配置项替换掉再打包
"ts-loader": "^2.3.3", => typescriptde的解释器
"typescript": "^2.4.2",
"url-loader": "^0.5.8",
"vue-loader": "^12.2.2",
"vue-resource": "^1.3.4", => 封装了一些ajax请求的模板，可以方便的调用
"vue-style-loader": "^3.0.1", => 解释vue内部的css样式
"vue-template-compiler": "^2.3.3",
"vuex-router-sync": "^4.2.0",
"webpack": "^2.6.1",----------------------------------------------------------
"webpack-bundle-analyzer": "^2.2.1", |
"webpack-dev-middleware": "^1.10.0", | => vue资源模块化管理
"webpack-hot-middleware": "^2.18.0", |
"webpack-merge": "^4.1.0"-----------------------------------------------------
},--------------------------------------------------------------
"engines": { |
"node": ">= 4.0.0", |
"npm": ">= 3.0.0"
},--------------------------------------------------------------
"browserslist": [-----------------------------------------------
"> 1%", |
"last 2 versions", | => 适用的浏览器版本范围
"not ie <= 8" |
]---------------------------------------------------------------
}
网友评论