在我朝, 因为伟大的wall的存在, 什么git npm pip之类的原生源都不怎么好用, 必须要找个什么镜像之类的.npm最好的镜像当然就是淘宝了. 并且淘宝贴心地推出了cnpm工具, 替代npm安装.
以前真以为npm和cnpm除了源不一样其他都以一样一样的, 结果在用electron+asar打包的时候被坑了一天... 安装的包使用死活找不到.我要装的包是ncp. 情况是这样的:
0. 首先简化的目录结构是:

rootdir
|-electron.exe
|-resources
  |-app
    |-main.js
    |-index.html
    |-renderer.js
  1. 在electron开发源码目录下(app目录, 也就是main.js所在目录)使用
    cnpm install --save ncp
    安装, 并在renderer.js文件中
    var ncp = require('ncp')

  2. 在此目录下运行
    electron .
    注意: 这个electron是使用npm install -g electron安装的全局electron, 与前面目录结构中的electron.exe不是同一个.
    一切正常.

  3. resources目录下用asar pack app app.asar 打包

  4. 在外层目录下运行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安装

标签: none 阅读量: 1054

添加新评论