npm的package.json中devDependencies和dependencies區別是什麼？

devDependencies和dependencies的區別

最近發現，不少公司的小夥伴也好，網上的不少文章也好，包括上半年的我也好，都對devDependencies和dependencies並無那麼在乎，年初作gulp重構公司的前端工程也一股腦的把全部npm包打到devDependencies。

那麼，究竟有什麼區別呢？

大部分觀點：
devDependencies用於本地環境開發時候，因此，全部的不會在發佈時候打包進線上代碼的npm包都放在這裏，命令是：npm i -D ***。好比像這些包：babel-core、babel-eslint、等babel系列，autoprefixer、webpack、webpack-dev-server、koa、*-loaderloader系列等等，詳細的可見個人 Github源碼

dependencies用戶發佈環境，因此，不會包含本地開發任何的包,好比：react、react-redux、react-router-dom等，詳細一樣可見個人 Github源碼

這樣作有什麼好處呢？

這樣作的話，咱們在發佈的時候，能夠將dependencies裏的全部包，打包成一個vendor.js文件，由於這個文件都是三方庫，代碼幾乎不太會改變，這樣，這部分代碼就能很好的被遊覽器緩存利用了；而對於項目相關的JS代碼，愉快得迭代就行了。

實現細節

以webpack爲例子，在配置文件中，編輯：

const pkg = require('./package.json');
.
.
.
entry: {
    app: path.resolve(__dirname, 'app/index.jsx'), // 這行是項目相關的JS代碼
    // 將第三方依賴（node_modules）的庫打包
    vendor: Object.keys(pkg.dependencies)
},

完整項目地址

戳我 >>