vue 腳手架（二，項目依賴說明 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, 以及各類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.rm('-rf', 'out/Release') 等於 rm -rf out/Release

portfinder: 這個工具用於發現一個尚未被佔用的端口。由於咱們常常使用的80,8080 端口都有相應的別的應用也可能會使用。當這些端口被佔用時，能夠發現一個新的端口以供使用。