electron +asar+ cnpm install的坑爹事儿
在我朝, 因为伟大的wall的存在, 什么git npm pip之类的原生源都不怎么好用, 必须要找个什么镜像之类的.npm最好的镜像当然就是淘宝了. 并且淘宝贴心地推出了cnpm工具, 替代npm安装.
以前真以为npm和cnpm除了源不一样其他都以一样一样的, 结果在用electron+asar打包的时候被坑了一天... 安装的包使用死活找不到.我要装的包是ncp. 情况是这样的:
0. 首先简化的目录结构是:
rootdir
|-electron.exe
|-resources
|-app
|-main.js
|-index.html
|-renderer.js
在electron开发源码目录下(app目录, 也就是main.js所在目录)使用
cnpm install --save ncp
安装, 并在renderer.js文件中
var ncp = require('ncp')在此目录下运行
electron .
注意: 这个electron是使用npm install -g electron安装的全局electron, 与前面目录结构中的electron.exe不是同一个.
一切正常.resources目录下用asar pack app app.asar 打包
在外层目录下运行electron.exe 发现console提示找不到ncp!
问题产生, 以为是electron的问题, 沿着这个方向查了好久...直到刚刚才发现, cnpm安装的目录结构和npm不一样!
* 建立一个空目录,运行npm install --save ncp,结果如下:
C:\r\vueproj\nhproj\nhpedev\test>npm install --save ncp
npm WARN saveError ENOENT: no such file or directory, open 'C:\r\vueproj\nhproj\nhpedev\test\package.json'
C:\r\vueproj\nhproj\nhpedev\test
`-- ncp@2.0.0
npm WARN enoent ENOENT: no such file or directory, open 'C:\r\vueproj\nhproj\nhpedev\test\package.json'
npm WARN test No description
npm WARN test No repository field.
npm WARN test No README data
npm WARN test No license field.
是的,空目录里面没有package.json, 找不到也正常. tree一下,看看结构:
C:.
└─node_modules
├─.bin
└─ncp
├─bin
├─lib
└─test
├─modified-files
│ ├─out
│ └─src
├─regular-fixtures
│ └─src
│ └─sub
└─symlink-fixtures
└─src
└─dir
可以看到ncp直接装在node_modules下面.
再dir确认一下:
2016/11/25 11:25 <DIR> .
2016/11/25 11:25 <DIR> ..
2016/11/25 11:25 <DIR> node_modules
进入node_modules确认一下ncp的目录类型,不是一个链接而是一个真的目录:
2016/11/25 11:25 <DIR> .
2016/11/25 11:25 <DIR> ..
2016/11/25 11:25 <DIR> .bin
2016/11/25 11:25 <DIR> ncp
* 然后另外建立一个空目录, 使用cnpm install --save ncp输出如下:
C:\r\vueproj\nhproj\nhpedev\testcnpm>cnpm install --save ncp
[ncp@*] installed at node_modules\.npminstall\ncp\2.0.0\ncp (0 packages, use 540ms, speed 7.23kB/s, json 3.93kB, tarball 0B)
All packages installed (1 packages installed from npm registry, use 572ms, speed 6.87kB/s, json 1(3.93kB), tarball 0B)
并没有报任何错误, dir看一下,连package.json都贴心的生成了:
2016/11/25 11:26 <DIR> .
2016/11/25 11:26 <DIR> ..
2016/11/25 11:26 <DIR> node_modules
2016/11/25 11:26 47 package.json
看一下package.json的内容,没有问题:
{
"dependencies": {
"ncp": "^2.0.0"
}
}
用tree命令看看目录结构
└─node_modules
├─.bin
├─.npminstall
│ ├─ncp
│ │ └─2.0.0
│ │ └─ncp
│ │ ├─bin
│ │ ├─lib
│ │ └─test
│ │ ├─modified-files
│ │ │ ├─out
│ │ │ └─src
│ │ ├─regular-fixtures
│ │ │ └─src
│ │ │ └─sub
│ │ └─symlink-fixtures
│ │ └─src
│ │ └─dir
│ └─node_modules
│ └─ncp
│ ├─bin
│ ├─lib
│ └─test
│ ├─modified-files
│ │ ├─out
│ │ └─src
│ ├─regular-fixtures
│ │ └─src
│ │ └─sub
│ └─symlink-fixtures
│ └─src
│ └─dir
└─ncp
├─bin
├─lib
└─test
├─modified-files
│ ├─out
│ └─src
├─regular-fixtures
│ └─src
│ └─sub
└─symlink-fixtures
└─src
└─dir
可以看到结构是完全不同的, 除了node_modules/ncp是和npm install结构相同以外, 还多出了node_modules/.npminstall/ncp/2.0.0/ncp 以及node_modules/.npminstall/node_modules/ncp
进入顶层的node_modules使用dir:
C:\r\vueproj\nhproj\nhpedev\testcnpm\node_modules 的目录
2016/11/25 11:26 <DIR> .
2016/11/25 11:26 <DIR> ..
2016/11/25 11:26 <DIR> .bin
2016/11/25 11:26 <DIR> .npminstall
2016/11/25 11:26 <JUNCTION> ncp [C:\r\vueproj\nhproj\nhpedev\testcnpm\node_modules\.npminstall\ncp\2.0.0\ncp]
这一层的ncp目录不是真实目录,而是一个JUNCTION!这是与npm install最大的不同,并且也导致了后面electron asar包的找不到的问题
进到node_modules/node_modules/ncp中, dir:
C:\r\vueproj\nhproj\nhpedev\testcnpm\node_modules\.npminstall\node_modules 的目录
2016/11/25 11:26 <DIR> .
2016/11/25 11:26 <DIR> ..
2016/11/25 11:26 <JUNCTION> ncp [C:\r\vueproj\nhproj\nhpedev\testcnpm\node_modules\.npminstall\ncp\2.0.0\ncp]
ncp仍然是一个JUNCTION
进最后一个目录node_modules/.npminstall/ncp/2.0.0/进行dir:
C:\r\vueproj\nhproj\nhpedev\testcnpm\node_modules\.npminstall\ncp\2.0.0 的目录
2016/11/25 11:26 <DIR> .
2016/11/25 11:26 <DIR> ..
2016/11/25 11:26 <DIR> ncp
这是一个真实的ncp目录. 也是其他JUNCTION指向的目录.
- 回到electron,解决问题的方式是, 删除掉node_modules下面的JUNCTION的ncp目录, 将真实的ncp目录复制到此, .npm_install目录可以删除. 再运行electron.exe就没有问题了.
或者使用npm install而不是cnpm安装