博客挺久没更新了，感觉还是偏懒了一些。从迅雷离职到进入新公司也有一段时间了，目前在新公司主要参与工作流程优化，其中包括自动化工具的开发、组件平台搭建等等，进一步接触node.js。本文主要简述在工作上一些npm包全局安装带来的问题以及解决的方法。
这里以webpack为例来说，《React结合Webpack使用》这篇文章中演示的例子Todos，webpack、webpack-dev-server都是采用全局安装的方式，这时候其他用户从Github上获取代码之后，他需要执行以下两步操作才能把依赖以及工具下载下来。这些我都得在README.md中一一说明，README.md会显得比较长，步骤也比较繁琐。
npm install
npm install -g webpack webpack-dev-server
其二，Todos是我几个月前写的，webpack用的是当时最新的版本，假如现在版本更新了，废弃了一些参数，用户全局安装最新的版本，可能就会执行失败。这种情况在一些老的代码经常出现。
针对以上两个已知的问题，可以利用npm包的一些特性来处理的。
在项目根目录先执行一下
npm install --save-dev webpack
然后看一下node_module目录结构，如下：
webpack目录是webpack源码包，其下级目录bin中为可执行文件。.bin目录中文件为可执行文件，其中webpack文件软链接到webpack源码目录bin中的webpack.js。
现在可以来看一下package.json文件。
{
"name" : "demo",
"devDependencies" : {
"webpack" : "^1.12.2"
},
"scripts": {
"webpack" : "webpack -p"
}
}
package.json中的scripts属性可以用来简化指令，通过执行npm run-script来执行对应的指令。
执行npm run webpack，也即执行webpack -p，但不同于全局执行webpack -p，这里会优先查找node_module/.bin目录中对应的可执行文件webpack，如果找不到，再查找全局的webpack命令。
通过这种方式，就可以把依赖包放到项目中，执行一次npm install即可安装全部依赖包，也解决了npm包版本冲突的问题，从而保障了项目的成功执行。
当然，采用npm run-script方式来解决npm包全局安装的问题，并不意味着不要使用全局安装包。在项目中，不依赖的包可以采用全局安装，比如采用browser-sync去预览某个html文件、采用vorlon远程调试页面，这样子就方便在命令行直接执行。
在本文最后，介绍另一种不全局安装webpack的方式，采用webpack提供的API来写，同时配合npm run-script方式来简化命令。package.json内容如下：
{
"name": "webpackWithoutGlobal",
"version": "1.0.0",
"description": "webpack非全局安装使用",
"main": "index.js",
"config": {
"port": 8080
},
"scripts": {
"start": "node server.js",
"build": "webpack -p --config webpack.production.config.js"
},
"author": "wen",
"license": "MIT",
"devDependencies": {
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
},
"dependencies": {
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2"
}
}
server.js代码如下：
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var packageConfig = require('./package.json');
var webpackConfig = require('./webpack.config');
new WebpackDevServer(webpack(webpackConfig), {
publicPath: webpackConfig.output.publicPath,
hot: true,
historyApiFallback: true,
stats: {
colors: true
}
}).listen(packageConfig.config.port, function (err) {
if (err) {
console.log(err);
}
console.log('Listening at http://localhost:' + packageConfig.config.port);
});
通过执行npm start来启动server，执行npm run build来生成生产环境的代码。
代码地址：https://github.com/wengeek/examples/tree/master/webpack-without-global