前端工程化-公共子產品的依賴和常用的工作流

題記： 一個人的項目，還有工程化的問題嘛？   我們在推進子產品化群組件化的過程中，肯定會不斷的沉澱出我們項目的子產品群組件。對于這些沉澱出的子產品群組件怎麼管理？另外怎麼依賴也是個問題？ 你真的想這樣嘛？   var BreadCrumb = require(‘../../../../uikit/breadcrumb’); //真心ugly。     之前也嘗試了很多的不同的解決方案，最終發現npm2.0的local module是最簡單的，而且最符合子產品化思維，我們可以把我們的子產品按照功能進行劃分。 比如： uikit  — breadcrumb.js  — data-table.js  — search-form.js  ...  util      —ajax.js      —pagenation.js dialog.js ...   這樣我們建立自己的子產品，然後可以單獨的維護，單獨送出到git，然後通過npm install來進行本地安裝。而且解決了依賴的問題。 對于上面的問題，我們可以簡單這樣玩： var BreadCrumb = require(‘uikit/breadcrumb’);  //cool.正如我們期待的一般   但是通過我們項目多人協調的過程中，不爽的地方暴露出來，因為我們的公共子產品很少，我們也在不斷努力的在抽取，這樣會導緻我們公共的子產品變化比較大，每次變動的時候都需要删除node_modules下面本地安裝的uikit，然後再次npm install ….一次我忍了，二次一聲歎息， 三次四次，你妹。。。是的，我懂的，我們都麼有那麼好的耐心。   那怎麼辦呢？？ 我們又想按照标準子產品的做法，又想酷爽的解決标準子產品的依賴問題。不得再次祭出webpack。真的懂我們開發者的心啊，麼麼哒！   由于node的橫空出世，徹底解放了前端的生産力。大神們紛紛開始造了一個個輪子。比如想在前端建立前端的倉庫，類似maven的倉庫，比較有名的是bower（twitter出品），components（tj大神）。是以為了相容這些輪子，webpack也做了相應的适配。正好這個适配也可以很好的解決上面我提到的我們想要解決的問題。   剩下的事情就變得異常的簡單了， 一個配置項搞定。   在webpack中的配置檔案中 module.exports = {

    entry: './index.js',

    output: {

        path: './build',

        filename: 'bundle.js'

    },     resolve: {         modulesDirectories: ['', 'uikit', 'node_modules’] //是的，webpack提供了多個子產品目錄的解析，通過這個解決本地子產品的問題。     } };   for example： ➜  web-module  tree -L 2

.

├── build

│   └── bundle.js

├── index.js

├── package.json

├── uikit

│   ├── index.js

│   ├── package.json

│   └── utils.js

├── webpack.config.js

└── webpack.config.js~

2 directories, 8 files   ➜  web-module  more uikit/utils.js

var _ = module.exports = {};

_.sayHello = function() {

  console.log('111say hello world...'); };   ➜  web-module  more index.js require('uikit/utils').sayHello();   打包， webpack   運作   ➜  web-module  node build/bundle.js 111say hello world...   這是你修改utils的方法，就不需要什麼本地安裝了。     在我們順利的解決了子產品化依賴的問題後，再來看看工作流的問題。 當我們在開發環境中，我們需要不停的自動的監控打包，然後在上線之前還要做做寫優化比如壓縮等。于是就需要不停的敲指令了。   開發環境， webpack webpack -d —-config webpack.config.js webpack —watch webpack -d —config webpack.config.js —watch     上線： webpack -p —config webpack.production.js   敲出上述的指令也真是一件體力活。還好npm的run可以為我們定制一些的工作流。在package.json中配置，相應的參數即可。 {

  "name": "web-module",

  "version": "1.0.0",

  "description": "web module",

  "main": "index.js",

  "scripts": {

    "build": "webpack --config webpack.config.js -w",

    "release": "webpack --config webpack.production.js",

    "start": "webpack-dev-server --port 3000 --watch --process --color"

  },

  "keywords": [

    "web",

    "module"

  ],

  "author": "hufeng",

  "license": "ISC"

}       爽直的時刻： npm run build #開發 npm run dist #正式環境打包   ➜  web-module npm run build

> [email protected] build /Users/bee1314/Code/eggs/web-module

> webpack --config webpack.config.js -w

Hash: a2f467270792fdfe044c

Version: webpack 1.4.15

Time: 77ms

    Asset  Size  Chunks             Chunk Names

bundle.js  1709       0  [emitted]  main

   [0] ./index.js 35 {0} [built]

   [1] ./uikit/utils.js 99 {0} [built]     ➜  web-module npm start

> [email protected] start /Users/bee1314/Code/eggs/web-module

> webpack-dev-server --port 3000 --watch --process --color

http://localhost:3000/webpack-dev-server/

webpack result is served from /

content is served from /Users/bee1314/Code/eggs/web-module

Hash: a2f467270792fdfe044c

Version: webpack 1.4.15

Time: 90ms

    Asset  Size  Chunks             Chunk Names

bundle.js  1709       0  [emitted]  main

chunk    {0} bundle.js (main) 134 [rendered]

    [0] ./index.js 35 {0} [built]

    [1] ./uikit/utils.js 99 {0} [built] webpack: bundle is now VALID.