【轉】前端工程化-公共模塊的依賴和經常使用的工做流

題記： 一我的的項目，還有工程化的問題嘛？

 

咱們在推動模塊化和組件化的過程當中，確定會不斷的沉澱出咱們項目的模塊和組件。對於這些沉澱出的模塊和組件怎麼管理？另外怎麼依賴也是個問題？

你真的想這樣嘛？

 

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

> web-module@1.0.0 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

> web-module@1.0.0 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.