博客挺久没更新了,感觉还是偏懒了一些。从迅雷离职到进入新公司也有一段时间了,目前在新公司主要参与工作流程优化,其中包括自动化工具的开发、组件平台搭建等等,进一步接触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