vue-cli3 front-end tread and a new method for multi-project sharing local node_modules
0.Environment configuration and directory structure
System：windows
Project structure：
hello-world #manager web end | .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 back end | | package.json | +---public | +---node_modules | +---vue2-elm #user web end | | package.json | +---src
1.The problem appears
Recently I was developing a vue-based full-stack HTML5 project, which is written in scripting languages, both in front end and back end. One of the benefits of JS full-stack is that you can develop a good enough web-side application without having to master more progammming languages, which is ideal for individual indie developers. But there is also a problem that JavaScript is a scripting language and is single-threaded. If you want to run the front-end, back-end, and database at the same time, you must run three projects separately or combine these modules into one project. Tthis is either troublesome or greatly increase the coupling degree of the project, which is very unfavorable for debugging. At the same time, if you get the source from the git remote branch , and then install the dependencies from the beginning, you must install the dependencies of the front end and back end separately, especially if the front-end is divided into several cases (such as the user web app and the manager web app ). It is also troublesome. It is therefore necessary to use a method that allows multiple front-end and back-end and even databases to run simultaneously with just one command.
2.Solving ideas
After searched on the internet, I found that I can use the npm run <script> command to call the scripts defined in the package.json file. At the same time, I also found a module named “concurrently” from the community. It enables multiple projects to run simultaneously. In this way, a solution is made as follows:
{
"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"
},
...
}
This allows you to install dependencies with a single command (npm run install-all&&npm run dev) and run hello-world ( manager web end), vue2-elm (user web end), node-elm (back End) and mongodb (database).
3.New issue 1 and solution
I met a very serious error when using npm installation, that is, the installation will prompt the lack of “visual studio 2008 module VCBuild.exe” error in the processing of “ node-gyp rebuild” , At this time, I’m puzzled. Why do I need to install the C++ module for I am obviously developing a javascript project? After investigation, it was found that an error occurred while installing a module named node-jieba. As we know, node-jieba is a node-side Chinese word segmentation tool (just help you divide a sentence into several words to help you semantic analysis).Then I even get more puzzled. My project is just a simple order project and I didn’t use artificial intelligence, Why should I install this module? I used the “npm ls” command to check the dependency tree and found that the package is an optional dependency in “@vue/cli-plugin-babel”. After clarifying the problem, I added an option to package.json: “no-optional”: “true”.
{
"name": "hello-world",
"version": "0.1.0",
"no-optional": "true"
...
}
This solves the problem.
4.New issue 2 and solution
Although the whole process was installed smoothly, the process was abnormally slow. After excluding the network problem, I looked at the size of the dependencies of these projects. I was surprised to find that although these projects have few functions, the installation dependencies have reached an astonishing 700MB, which is obviously redundant. A closer check reveals that the dependency of the hello-world project is 300MB, while the vue2-elm dependency is 400MB. Both projects are front-end projects and use the same framework. There are many common modules like vue-cli. In this case, you can use a global installation to solve the problem, but it is clear that installing to the global path for just two small projects is a waste of system-wide resources. The way to deal with redundancy in Linux is to use soft links. So can windows be? And I really found a way in windows, so my package.json will be like this:
{
"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"
}，
...
}
If you make a careful comparison of this package.json file with the previous package.json file, you will find that I have added a soft link command to my dev script, “mklink /D vue2-elm\node_modules”. In this way, when the vue2-elm project wants to find local node_modules, it will go to hello-world directory to find node_modules. It should be noted that the commands of windows are best placed in concurrently to run in a multi-threaded manner, so that the who process will continue even if several commands fail and exit,and also note that json is not allowed to have a single escape character \ appears, if a single \ need to appear as a parameter(like windows command use it to distinguish directory), then add another escape character so that to be a “\”.
5.New issue 4 and solution
Using npm to install is too slow, just use yarn. Yarn is a new type of js package manager similar to npm, the former is maintained by the open source community, while the latter is maintained by several large technology companies such as google, which is better no need to say. Package.json eventually became like this:
{
"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"
},
...
}