繼續上一篇，
上一篇講了 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，這個插件會對元素的樣式進行規范化處理，修正錯誤和常見的瀏覽器不一致問題，使用詳細的注釋來說明代碼用途。（詳見：https://github.com/csstools/normalize.css）。
Eslint: 這個也厲害了。這個一個JavaScript和JSX的代碼檢查工具，並且擁有高度的可配置能力。官方也貼出了所有的可配置列表（https://cn.eslint.org/docs/rules/）。有了這個插件。我們可以基本上統一代碼的書寫風格。這對中大型項目以及代碼的拓展是十分有利的。
*-loader 各種loader，webpack使用，這個在webpack的文檔中有詳細的介紹，這里不再重復說明了，等有時間再寫篇對webpack的介紹文章。
*-plugin 各種plugin。和loader一樣，也是webpack的插件。
不必要依賴：（之所以說他是不必要的是說不用他也可以，但是用了它更好一些，比如shelljs，你也可以不用他，直接寫shell。）
chalk：這是一下用來增強node控制台輸出的工具，可以實現彩色化輸出。
ora：實現了控制台進度條功能。
rimraf：實現了shell的 rm -rf 功能。遞歸刪除一整個目錄
sermver：這個是對語義化版本號的管理，檢查工具。可以參考官方文檔（https://semver.org/lang/zh-CN/）
shelljs：這個工具在node環境下用函數方式實現了linux shell 中的一些基礎命令。shell
portfinder: 這個工具用於發現一個還沒有被占用的端口。因為我們經常使用的80,8080 端口都有相應的別的應用也可能會使用。當這些端口被占用時，可以發現一個新的端口以供使用。