之前一直在linux下使用node.js以及webpack,因为我的ubuntu kylin是装在虚拟机上的,最近使用webpack的细节的东西比较多,就想搞在windows上,不搞不知道,简直头疼死我了。

主要是webpack(或者其他的modules)。

零、windows下配置npm

node.js以及npm就不多说了,windows直接安装即可.

不建议安装在C盘,当然如果 node_global 和 node_cache 不在C盘就无所谓了。

安装成功后,会加一个PATH,这样子可以直接在cmd中使用命令:

$ node -v 
$ npm -v

来查看版本号,如果这个都无法运行,那一定是PATH出了问题,可以卸载重装。

  • 所有的命令都在cmd跑就OK

配置NPM

1. 配置使用淘宝镜像

一般我不习惯使用cnpm,而且本文的问题没解决之前,也不能使用cnpm,直接将npm的镜像配置成淘宝的就行了。

# 配置淘宝镜像
$ npm config set registry https://registry.npm.taobao.org
# 可以使用 npm config get registry查看当前的配置

2. 配置node_global和node_cache

  • 一般我选择在安装目录下建立 node_global 和 node_cache 两个文件夹
  • 在 node_global 中建立 node_modules 文件夹
  • 下面的命令使用的是完整的路径 X:/xxxxx/xxxxx/node_global
# npm配置node_global和noed_cache
$ npm config set prefix "X:/XXXX/XXX/node_global"
$ npm config set cache  "X:/XXXX/XXX/node_cache"

一、问题

(前提:node以及npm都能使用且已经配置好了)

  1. 在一个文件夹下创建一个目录,如 webpack_test
  2. 进入该目录并且运行cmd
  3. 初始化
$ npm init
  1. 局部安装webpack,并一路回车
$ npm install webpack --save-dev

上面操作执行后,会出现 node_modules 以及 package.json两个文件

  1. 创建 hello.js 文件,随便写点儿东西
  2. 打包hello.js
$ webpack hello.js hello.bundle.js 

问题出现在这里,会提示你 webpack不是内部命令

然后网上有人说需要全局安装 webpack

  1. 全局安装webpack
$ npm install webpack -g

安装成功后,再次执行webpack命令,发现依旧无法运行,而网上的诸多所谓解决就没下文了

二、原因

出现问题的原因网上很多所谓的方案都有说,其实也很明确,出现命令无法运行,而且已经全局安装了,一定是path的原因

path出错的根本原因是:

全局安装的 node_modules (就是上面在 node_global 中创建的文件夹)没有正确的加入path

所以跑什么都跑不来。

三、解决

知道了问题所在就好办了,直接将 node_global/node_modules 加入path即可。

为了以后重装方面,多添加一个系统变量。

(不知道如何打开和配置环境/系统变量的出门左转百度)

1. 创建系统变量 NODE_PATH,将上面的完整的node_modules目录加入

QQ截图20170501233806.jpg

2. 将NODE_PATH加入系统变量的Path

  • 后面拼接 ;%NODE_PATH%;

    • 如果前面已经有了分号,则前面的分号不需要

QQ截图20170501234054.jpg

3.确定后重启CMD,再次执行webpack就不会提示不是内部命令

QQ截图20170501234205.jpg

4.对hello.js的打包也没问题

QQ截图20170501234215.jpg

一切的一切都是 Path的原因

不仅仅是webpack,如果path不对,其他npm的module也没办法跑