This is the 17th day of my participation in Gwen Challenge
Summary TANGJIE other scaffold base simple scaffolding
Front-end scaffolding development (three), real knowledge comes from practice
Develop an example-test scaffolding and make a simple thing ~
1. Basic development
1.1 Create a Project
Find a place to create a folder named example-test
Initialize the project with NPM init, then create a bin folder under its project and write an index.js file as follows:
#! /usr/bin/env node
console.log('wecome exaple-test')
Copy the code
Configuration package. Json
{..."name": "@tangjie123/example-test"."version": "1.0.0"."description": "test"."bin": {"example-test":"bin/index.js"
},
"main": "index.js". }Copy the code
1.2 Publishing to NPM
NPM publish –access public: NPM publish –access public: NPM publish –access public: NPM publish –access public: NPM publish –access
1.3 NPM Global Installation Experience
For example, if my package name is @tangjie123/example-test, then run NPM I @tangjie123/ example-test-g
Reuse (Have you found: – In a/c/Users/Administrator/AppData/Roaming/NPM configuration vue under soft links (shell script) points to the directory at the node_modules / @ vue/cli/bin/vue. Js this step in our download has been installed in the global We did it for us
or
winpty example-test.cmd
Wecome Exaple -test
2. Possible problems with NPM release
2.1 403
npm ERR! 403 403 Forbidden – PUT http://registry.npmjs.org/hello_test_npm – You do not have permission to publish “xxx”. Are you The problem with logged in as the correct user is not obvious
In fact, you probably created the NPM account without verifying the email, just verify the email
2.2 Error 402 appears, prompting payment
Publish –access public: publish –access public: publish –access public: publish –access public: publish –access
2.3 Other Errors
NPM other errors have a better prompt, look at the prompt search bar!!
3. Local test
Cli local debugging without subcontracting
Run the NPM link command in the directory where my cliexample-test/bin/index.js file is located
C:\Users\Administrator\AppData\Roaming\npm\example-test -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tangjie123\example-test\bin\index.js
C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tangjie123\example-test -> E:\myproject\Demo\cli\example-test
Copy the code
This completes the local debugging of the CLI. There is another way, but the biggest advantage of this method is that the local CLI file changes do not need to be published to NPM, and the results of the run are also up to date, which is easy to debug, so the other methods are not described
Cli debugging in case of subcontracting
- First, establish a subcontract. The subcontract on my side is named
example-test-lib/lib/index.js
And then usenpm init
Initialize the project - Write a simple addition function under this index.js file and export it
module.exports = {
add(a,b){
return a + b
}
}
Copy the code
- Enter the main package
example-test
Directory below, and then throughnpm link example-test-lib
Error message is displayed when running this command404
This is because the subpackage is not published to NPM, so for local debugging, we need to go toexample-test-lib/lib/index.js
To go tonpm link
So this file is linked to, and it’s not finished yetpackage.json
To modify the entry file pointinglib/index.js
Because the default entry file for project initialization isindex.js
."main": "lib/index.js".Copy the code
Then go to the directory of the main package example-test and link to the subpackage via NPM link example-test-lib.
- Because not through NPM download way, but through the link way, so we need in the main package
package.json
To manually add dependencies (in this case, production dependencies)
."dependencies": {"example-test-lib": "^ 1.0.0"}...Copy the code
Note :devDependencies refers to developing dependencies, and dependencies refer to producing dependencies
- Local test effect
Try referencing subcontracting in the main package’s index.js!! The complete main package code is shown below
#! /usr/bin/env node
const lib = require('example-test-lib');
console.log('WecOME Exaple -test Link local test')
console.log(lib.add(5.7))
function A (){
this.b = function(c,b){
return c+b
}
}
A.prototype.test = () = >{
console.log('xxx')}const a = new A();
const b = new A();
a.b;
b.b;
a.test === b.test
Copy the code
That’s it for a simple CLI and local test
3. Summary, the local link standard process
3.1 Link local scaffolding
CD your CLI directory, NPM link where the entry file is locatedCopy the code
3.2 Linking local library files
CD your your library, entry file location NPM linkCopy the code
Then, go to the entry file for the main package
CD your CLI directory, entry file location NPM link your library nameCopy the code
3.3 Unlinking a Local File
CD your CLI directory, where the entry file is located NPM unlinkCopy the code
3.4 Unlinking the local library File
CD your your library, entry file location NPM unlinkCopy the code
Then, go to the entry file for the main package
CD your CLI directory, entry file location # link exists NPM unlink Your library name # link does not exist rm -rf node_modules NPM installCopy the code
3.5 understandnpm link
NPM link your library file, which means to link the file specified in node_modules of the current project to the library file specified in node_modules of node global. And parse bin and parse bin configuration to create executable files