本文主要從一個上線項(xiàng)目的packge.json分析一個上線項(xiàng)目中常見的插件以及為什么會引入這些插件。
通過這些配置介紹，你可以去優(yōu)化已有的項(xiàng)目或者找到解決棘手問題的靈感
{
"name": "bimserver-admin",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "wbjqiqi",
"private": true,
"scripts": {-------------------------script中是我們在npm中輸入的npm run * 所執(zhí)行的對應(yīng)的node命令
"dev": "node build/dev-server.js",? => npm run dev 相當(dāng)于執(zhí)行 => 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", => 獲取命令行中用戶輸入的參數(shù)，從而執(zhí)行不同的打包方式。
在命令行中輸入?yún)?shù)的方式為? ? npm run dev -- -p => 參數(shù)為-p
"element-ui": "^1.4.3", => vue的一款ui插件，封裝了一些常見的ui，類似于jquery和jquery-ui的關(guān)系
"vue": "^2.3.3",
"vue-loader": "^12.2.2", => 識別我們寫的.vue后綴的文件，將這些文件轉(zhuǎn)化成js
"vue-logger": "^0.0.2", => 控制臺輸出的一個插件，讓我們在控制臺中輸出的信息更多元化
"vue-router": "^2.6.0", => vue中路由跳轉(zhuǎn)的插件
"vuex": "^2.3.1" => vue中存儲一些所有文件中都能獲取和控制的變量和方法
},
"devDependencies": {-------------------------------npm run dev 開發(fā)環(huán)境測試的時候依賴的插件
"@types/node": "^8.0.25",
"@types/webpack": "^3.0.10",
"@types/webpack-env": "^1.13.0",
"autoprefixer": "^7.1.2", => 自動給我們的css代碼添加瀏覽器兼容性，用法，在webpack中css規(guī)則使用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轉(zhuǎn)碼換，將一種語法轉(zhuǎn)換成另一種語法
"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搭建服務(wù)端時，將前端請求體中的內(nèi)容規(guī)則化
搭配express組件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
"chai": "^3.5.0", => 用于自動化測試腳本開發(fā) 斷言庫（assert,expect,should）
"chalk": "^2.0.1", => 粉筆，在命令行報彩色錯誤，炫酷吧
"chromedriver": "^2.27.2", => e2e測試的時候使用，可以瀏覽器自動測試你的代碼效果是否正確（用戶的角度）
"connect-history-api-fallback": "^1.3.0",? => vue路由實(shí)現(xiàn)的基礎(chǔ)，識別url中的’/user‘等，沒有會產(chǎn)成404錯誤
"copy-webpack-plugin": "^4.0.1", => 拷貝資源和文件夾到打包目錄
"cross-env": "^5.0.1", -------------------------------------------
| => 解決跨平臺設(shè)置NODE_ENV的問題
"cross-spawn": "^5.0.1",-------------------------------------------
"css-loader": "^0.28.5",
"cssnano": "^3.10.0", => css代碼的壓縮，去除一些無用的空格
"element-ui": "^1.4.3", => 同生產(chǎn)環(huán)境
"eslint": "^3.19.0",----------------------------------------------------------
"eslint-config-standard": "^6.2.1",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
"eslint-config-vue": "^2.0.2",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
"eslint-friendly-formatter": "^3.0.0",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | => 設(shè)定一些大家都喜歡的代碼格式，方便大多人
"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", => 實(shí)現(xiàn)瀏覽器的熱更新
"express": "^4.14.1", => 封裝了一些node寫服務(wù)端的api
"extract-text-webpack-plugin": "^2.0.0",? => 將我們在.vue中寫的內(nèi)聯(lián)樣式提取到單獨(dú)的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服務(wù)端的代理插件，讓代碼在服務(wù)端跑起來
"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",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | => 調(diào)用selenium-server,進(jìn)行代碼的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，在測試框架中使用。
此外，在瀏覽器環(huán)境中，lolex提供了一個performance從時鐘開始的實(shí)現(xiàn)。
在節(jié)點(diǎn)環(huán)境中，lolex提供了nextTick與時鐘同步的實(shí)現(xiàn)，以及與時鐘一起使用的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打包插件，調(diào)用cssnano
"ora": "^1.2.0",? => node中彩色圖標(biāo)的輸出
"phantomjs-prebuilt": "^2.1.14", => 調(diào)用瀏覽器的unit測試用到
"rimraf": "^2.6.0", => 節(jié)點(diǎn)的UNIX命令 rm -rf
"sass-loader": "^6.0.6",
"scss-loader": "^0.0.1",
"selenium-server": "^3.0.1", => 將JavaScript代碼注入到瀏覽器中測試代碼（自動化）
"semver": "^5.3.0", => 可以判定當(dāng)前npm/webpack/node...的版本是否大于自己想要的版本
"shelljs": "^0.7.6", => 調(diào)用shell命令
"sinon": "^2.1.0", ----------------
| => 用于JavaScript的unit測試，存根和模擬。適用于任何單元測試框架。
"sinon-chai": "^2.8.0",------------
"string-replace-loader": "^1.3.0", =>替換字符串工具，可以在webpack打包前將源文件中某一些可配置項(xiàng)替換掉再打包
"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請求的模板，可以方便的調(diào)用
"vue-style-loader": "^3.0.1", => 解釋vue內(nèi)部的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"? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
]---------------------------------------------------------------
}
