从webpack的使用浅谈npm包的全局安装

Oct 3, 2015

4498

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

NodeJs 」相关文章

Wen's Blog

文章归档 » 文章标签 » 博主:吴文伟,Web开发爱好者,专注于前端开发,该博客用于记录和分享平时遇到的一些问题以及知识。

订阅

联系方式

链接