Windows下 搭建WEEX遇到的坑！！

不知道你在搭建windows平台下的WEEX开发，有没有遇到过这些坑，如果没有，那么我恭喜你。

1、Node.js的安装

Node.js的安装和安装windows的软件是一样的，在Node.js 官网选择下载Node.js安装包，然后安装，之后打开cmd到终端，输入：Node -v，出现版本号说明Node.js安装成功。

>C:\Users\Administrator>node -v>v8.1.2

安装了 Node.js 环境，npm 也随之安装了，输入：npm -v 或者 npm -version，如果你能看到版本号，则说明npm也可以使用了。

>C:\Users\Administrator>npm -v>5.3.0

npm（node package manager），通常称为node包管理器。它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。

2、weex-toolkit的安装

到了这里，我遇到的一个大坑就出现了。按照 weex 官方 的教程，我们使用npm安装weex-toolkit：

>npm install -g weex-toolkit

然而，这个时候看到了一句话：

国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

$ npm install -g cnpm --registry=https://registry.npm.taobao.org$ cnpm install -g weex-toolkit

提示：
如果提示权限错误（permission error），使用 sudo
关键字进行安装

$ sudo cnpm install -g weex-toolkit

于是，果断使用cnpm安装weex-toolkit，谁让我们是国内开发者呢。一路畅通，安装完成，打开cmd，输入： weex -v，OK，版本号出来了，大喜，这不就成功了么，然后再试试输入：weex 命令，结果gg了，出现了：

C:\Users\root\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\_xtoolkit@0.2.7@xtoolkit\src\package\NpmPackage.js:50                throw new Error('resolve path error:'+this.path)                ^Error: resolve path error:C:\Users\root\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\_weex-previewer    at NpmPackage.resolve (C:\Users\root\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\_xtoolkit@0.2.7@xtoolkit\src\package\NpmPackage.js:50:23)    at Command.run (C:\Users\root\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\_xtoolkit@0.2.7@xtoolkit\src\Command.js:43:13)    at XToolkit._done (C:\Users\root\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\_xtoolkit@0.2.7@xtoolkit\src\xtoolkit.js:149:36)    at process.nextTick (C:\Users\root\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\_xtoolkit@0.2.7@xtoolkit\src\xtoolkit.js:90:22)    at _combinedTickCallback (internal/process/next_tick.js:73:7)    at process._tickCallback (internal/process/next_tick.js:104:9)    at Module.runMain (module.js:606:11)    at run (bootstrap_node.js:390:7)    at startup (bootstrap_node.js:150:9)    at bootstrap_node.js:505:3

这很显然，安装weex的路径有问题，或者也有人说是cnpm镜像上的weex有问题，这个就不知道了，果断卸载cnpm安装的weex，重新使用npm安装试试：

>npm uninstall -g weex-toolkit>npm install -g weex-toolkit

接下来，坑又出现了，果然出现了权限检查的问题，并且直接最后报错：

然而，大家知道，windows是不支持 sudo 命令的，所以我们就要考虑其他的解决办法，最简单的就是，既然路径C:\Users\root\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules没有写入权限，那我们就换个路径好了。

再次打开cmd，输入：

>npm config ls

可以看到npm和node的一些信息和配置路径：

C:\Users\root>npm config ls; cli configsuser-agent = "npm/3.10.10 node/v6.10.3 win32 x64"; userconfig C:\Users\root\.npmrcprefix = "C:\\Users\\root\\AppData\\Roaming\\npm"registry = "https://registry.npm.taobao.org/"; builtin config undefined; node bin location = C:\Program Files\nodejs\node.exe; cwd = C:\Users\root; HOME = C:\Users\root; "npm config ls -l" to show all defaults.

prefix 的路径刚好就是我们写不进去的路径，接下来，我们在任意地方新建一个文件夹(最好不要有中文和空格)，我们修改 prefix：

>npm config set prefix "I:\Nodejs\node_modules"

然后依然使用npm安装：

>npm install -g weex-toolkit

我们会发现已经没有了权限的提醒和最后的Error，完美安装成功！你以为到这里就结束了，现在打开cmd，输入weex，发现会显示命令无效，我们继续，回到桌面，在计算机图标上右键->属性->高级系统设置->环境变量->系统变量->Path中，把刚才我们自己新建的文件夹添加进去，注意：别忘记在路径的最后添加反斜杠，表示路径之下还有文件存在。重新打开一个终端，输入weex，发现可以正常使用了。

原作者：大司命

我再续一些，我这后续 的项目操作吧，怎么样创建一个WEEX项目。

第一步：初始化

在你的工作目录，创建一个项目文件夹，然后进入该文件夹

H:\WEEX>md weex-test

H:\WEEX>cd weex-test

然后执行weex的初始化命令，出现提示，回车即可。

第二步：开发

进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。

在 package.json 中，已经配置好了几个常用的 npm script，分别是：

• build: 源码打包，生成 JS Bundle
• dev: webpack watch 模式，方便开发
• serve: 开启静态服务器
• debug: 调试模式

我们先通过 npm install 安装项目依赖。 

之后我们运行：npm run dev 和 npm run serve     我这里分在两个CMD终端里运行的。如下：

然后在浏览器里打开：localhost:8080即可看到效果了：

到此，开发环境已全部搭建完毕。

接下来开始WEEX之旅吧。