Recently, the project needs pure stateless components, so we package the components and make them into plug-ins. We directly refer to them, and write down the summary of making plug-ins to share, so that people can make their own plug-ins from scratch.

Vue’s stamp here

Make the plugin

  1. Install Node and NPM, create a new folder, open it in terminal, run NPM init, press Enter and type Yes to generate package.json, {“name”: “swTest”, “version”: “1.0.0”, “description” : “”,” main “:” index. Js “, “scripts” : {” test “, “echo \” Error: No test specified\” && exit 1″}, “author”: “”, “license”: “ISC”} Version indicates the version number. You need to manually update the version number each time you release a new version. Description is a description. Main is the entry file, the file that you read when you load this plug-in, and this is also the most important property, this property is the entry file that someone reads when they reference your plug-in, and in this file, you need to expose the interface; Author is the author, which can be an NPM registered name.

  2. Create a new SRC folder under the root directory to store your own code snippets.

  3. Create a new.npmignore in the root directory. NPM ignores the files in the project when publishing.

  4. Create readme. md in the root directory, which contains the project description for publishing to NPM.

Babel escape

Because many syntaxes are ES6 and above, you need to escape to ES5.

  1. Install Babel globally:npm install -g babel-cli
  2. ES6 Transcoding rules:npm install babel-preset-es2015 --save-dev
  3. React transcoding rule:npm install babel-preset-react --save-dev
  4. Transcoding rules for grammar proposals at different stages of ES7:npm install babel-preset-stage-0 --save-dev(0-3 is ok)
  5. Create a.babelrc file in the root directory. ; Adding rules{ "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }.
  6. We usually write the code in SRC, then escape the whole SRC to es5, and run the code in the root directorybabel src --out-dir libSRC escaped files.
  7. Modify package.json to change main tolib/index.
  8. Modify. Npmignore file to addsrc/ node_modules/ package-lock.json

️ Publish plug-ins

  1. If you do not have an NPM account, please go to the official website of NPM to register. The official website is:https://www.npmjs.com/;
  2. First change the name in package.json to your plug-in name, and then check whether this name has been registered on NPM official website. If so, change it.
  3. Project root directorynpm adduser, input NPM account password and email address, both indispensable. (Note: Enter an account if you already have onenpm loginLogin, account password and email, is also indispensable, if errorcode E409Because the NPM of Taobao was used, the login error was caused. Because you logged in to the NPM warehouse source of Taobao, Taobao should not provide you with login service. Just change the NPM Registry to the official one.nrm use npmIf an error is reported, NRM is not installed. Run the codenpm install -g nrmInstall NRM to execute code:nrm use npm);
  4. You can runnpm whoamiCheck whether the current user is yourself.
  5. Run the codenpm publishLaunch;
  6. You can click on packages in the upper right corner of NPM’s official website to view your releases.
  7. You can introduce your own plug-ins into your projectnpm install xxx --save-devTo use;

️ Maintenance plug-in

  1. The functions of the plug-in code have been expanded or modified, and a new version needs to be released. In addition to the code changes, you need to manually modify the version in package.json each time, which is the version number, indicating that the version has changed. The version number rule used by NPM is semver semantic version, initialized with 1.0.0, followed by the master version number. Revision number, major revision number is an incompatible API change, minor revision number is a functional addition, revision number is a problem fix.
  2. Run it againbabel src --out-dir libGet the latest lib and executenpm publishLaunch;
  3. How are projects in use updated after release? (1) If it is NPM, since it is its own plug-in, it can know what version has been changed. Find the version of the dependent package in package.json of the project, manually change the version number to the latest version, and then the project will runnpm install --forceIt’s ok; (2) If yarn is used, run the commandyarn upgradeAlso ok; (3) Because the dependency packages in the project will be updated, sometimes we will install third-party plug-ins to check.npm install -g npm-check-updatesRun,ncuView updatable packages,ncu -uUpdate package. Json,npm installUpgrade to the latest version.

A bit more dry stuff, when installing plug-ins, –save-dev is what you rely on during development, –save is what you rely on after release. -g indicates global installation, –save-dev can be abbreviated to -d, –save can be abbreviated to -s, and NPM install can be abbreviated to NPM I.

Code has been uploaded in the lot, lot address, welcome to visit (address: https://github.com/Songwei1029/create-plug), welcome to leave a message if you have any questions.