vue-cli3前端踩坑记以及一种多项目共用局部node_modules的新方法

vue-cli3前端踩坑记以及一种多项目共用局部node_modules的新方法

0.环境配置与目录结构

系统：windows
项目结构：
hello-world #管理员web端
| .eslintignore
| .eslintrc.js
| .gitignore
| babel.config.js
| package.json
| README.html
| README.md
| README.md.bak
| vue.config.js
| yarn.lock
|
±–node-elm #node.js后台
| | package.json
|
±–public
|
±–node_modules
|
±–vue2-elm #用户web端
| | package.json
|
±–src

1.问题出现

最近我在开发一个基于vue的全栈HTML5的项目，也就是无论前后端都采用javascript这种脚本语言写。这样的一个好处就是无需掌握更多的语言就能开发出一个像样的web端应用，非常适合个人独立开发者。但是 这也存在着一种问题那就是JavaScript是一种脚本语言，且是单线程的，如果想要同时运行前端，后端，数据库，那么就必须分别运行三个项目或者将这几个模块糅合到一个项目里写，这样要么麻烦要么大大增加了项目的耦合度，非常不利于调试。同时如果从另一个开发环境中重新从git远端分支获得源码，再重新安装依赖并运行的话，就必须分别安装前后端的依赖，尤其是前端分为好几个的情况下（比如用户端和管理员端），这样也十分让开发人员苦恼。因此有必要使用一种方法，使多个前端和后端乃至数据库在使用仅仅一句命令的情况下同时运行。

2.解决思路

通过查询资料发现，npm在运行的时候可以使用 npm run

{
 "name": "hello-world",
  "version": "0.1.0",
...
 "scripts": {
    "server": "npm run dev --prefix node-elm",
    "frontend": "npm run serve --prefix vue2-elm",
    "dev": "  concurrently   \" mkdir  D:\\mongodb \" \"mongod --dbpath D:/mongodb \" \"npm run server\" \"npm run serve\" \"npm run frontend\" ",
    "serve": "vue-cli-service serve",
    "install-all": "npm install && cd node-elm && npm install",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...
}

这样就能够使用一句命令的情况下安装依赖（npm run install-all）并同时运行（npm run dev）hello-world(管理员web端)、 vue2-elm （用户web 端）、node-elm（后端）和mongodb（数据库）。

3.新的问题与解决

我在使用npm安装的时候报出了一个很严重的错误，那就是在安装的时候会提示node-gyp rebuild，缺少 visual studio 2008模块VCBuild.exe报错了。这个时候我也挺纳闷的，我明明在开发javascript的项目，为啥给我提示需要安装c++模块了？经过调查发现是在安装一个名为node-jieba的模块的时候出错的。网上查了一下node-jieba是一个node端的中文分词工具（就是帮你把一个句子分成几个词，来帮你语义分析）。我更纳闷了，我这个项目只是一个简单的订单项目，又没用到人工只能，凭什么给我安装这个模块呢？我使用了npm ls的指令检查了一下依赖模块的情况，发现这个包是@vue/cli-plugin-babel里的一个可选依赖（optional dependency）。明确了问题之后，我在package.json里面加了一个选项：“no-optional”: “true”。

{
  "name": "hello-world",
  "version": "0.1.0",
  "no-optional": "true"
...
}

这样就解决了一个问题。

4.新的问题2与解决

整个过程安装下来，虽然比较顺利，但安装过程异常的慢。在排除了网络问题之后，我看了看这几个项目所需依赖的大小，我惊讶的发现，这几个项目虽然功能不多，但安装的依赖已经达到了惊人的700MB，很明显存在冗余情况！仔细检查了一下发现hello-world项目的依赖有300MB，而vue2-elm的依赖有400MB。而这两个项目都是前端项目，且用的是同一个框架。其中有不少如vue-cli这种公用模块。在这种情况下可以使用全局安装解决问题，但很明显仅仅为了两个小项目而安装到全局路径显得十分浪费系统资源。想到之前linux解决冗余的方法是使用软链接。那么windows可不可以呢?网上查了一下还真有，于是我的package.json就变这样了：

{
"name": "hello-world",
  "version": "0.1.0",
  "no-optional": "true",
  "private": true,
  "scripts": {
    "server": "npm run dev --prefix node-elm",
    "frontend": "npm run serve --prefix vue2-elm",
    "dev": "  concurrently \" mklink /D vue2-elm\\node_modules ..\\node_modules \"   \" mkdir  D:\\mongodb \" \"mongod --dbpath D:/mongodb \" \"npm run server\" \"npm run serve\" \"npm run frontend\" ",
    "serve": "vue-cli-service serve",
    "install-all": "npm install && cd node-elm && npm install",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }，
...
}

仔细观察会发现，我的dev script里面加了一个软链接，“mklink /D vue2-elm\node_modules",这样，vue2-elm项目想要找node_modules的时候，就会去hello-world里面找node_modules。要注意的是，winddows的命令最好放在 concurrently里以一种多线程的方式启动，这样即使其中一条命令出错也没关系，另外要注意的一点是json里是不允许\这样的转义字符单独出现的，如果硬要出现，那么就再来一个他自己成为这样"\"。

4.新的问题3与解决

使用npm安装实在太慢了，干脆使用yarn吧。yarn是类似npm的一种新型js包管理器，前者是开源社区维护的，而后者则是好几个大的科技公司如google维护的，哪个好自然不用多说。
package.json最终成了这个样子:

{
"name": "hello-world",
  "version": "0.1.0",
  "no-optional": "true",
  "private": true,
  "scripts": {
    "server": "npm run dev --prefix node-elm",
    "frontend": "npm run serve --prefix vue2-elm",
    "dev": "  concurrently \" mklink /D vue2-elm\\node_modules ..\\node_modules \"   \" mkdir  D:\\mongodb \" \"mongod --dbpath D:/mongodb \" \"npm run server\" \"npm run serve\" \"npm run frontend\" ",
    "serve": "vue-cli-service serve",
    "install-all": "yarn install && cd node-elm && yarn install",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...
}