MyException - 我的异常网
当前位置:我的异常网» Web前端 » 前端工程化-公共模块的委以和常用的工作流

前端工程化-公共模块的委以和常用的工作流

www.MyException.Cn  网友分享于:2015-02-06  浏览:0次
前端工程化-公共模块的依赖和常用的工作流
题记: 一个人的项目,还有工程化的问题嘛?
 
我们在推进模块化和组件化的过程中,肯定会不断的沉淀出我们项目的模块和组件。对于这些沉淀出的模块和组件怎么管理?另外怎么依赖也是个问题?
你真的想这样嘛?
 
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.
 
 

文章评论

10个调试和排错的小建议
10个调试和排错的小建议
为什么程序员都是夜猫子
为什么程序员都是夜猫子
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
漫画:程序员的工作
漫画:程序员的工作
Java程序员必看电影
Java程序员必看电影
程序员的鄙视链
程序员的鄙视链
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员应该关注的一些事儿
程序员应该关注的一些事儿
我是如何打败拖延症的
我是如何打败拖延症的
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
旅行,写作,编程
旅行,写作,编程
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
那些争议最大的编程观点
那些争议最大的编程观点
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员必看的十大电影
程序员必看的十大电影
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员都该阅读的书
程序员都该阅读的书
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
我的丈夫是个程序员
我的丈夫是个程序员
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
 程序员的样子
程序员的样子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
老程序员的下场
老程序员的下场
鲜为人知的编程真相
鲜为人知的编程真相
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
代码女神横空出世
代码女神横空出世
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
如何成为一名黑客
如何成为一名黑客
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
每天工作4小时的程序员
每天工作4小时的程序员
一个程序员的时间管理
一个程序员的时间管理
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有