[NPM publish Package] Publish process

In the past, WHEN I was learning some projects with my friends, I often wrote some duplicate codes, and then copied and pasted them for use in the next project, for example, I wrote them before
localStorage,
sessionStorageAnd other API function encapsulation implementation. Let’s say the project needs to use these encapsulated apis and you have to copy and paste them yourself. Let’s say if there are improvements or changes that can be made, then you need to overwrite the modified files for every project you use.

This method is too time-consuming and difficult to manage. Later, I wondered whether the frequently used NPM package could also be managed on it. There is also a version number to choose from different versions, but also to solve the problem of using different implementations of versions, if there are fixes and updates can also be synchronized…

There are so many advantages that I’m not going to describe the scenario.

Weaknesses? There are also. If you’re thinking for the masses, start maintaining your code for the long haul. There are no drawbacks if you don’t consider using it for yourself (and not on corporate projects).

Ok, no more nonsense, let’s start to introduce the process.

To use the NPM Publish Package service, you need to have an NPMJS account.

Registration address: www.npmjs.com

This simple, also do not say, as long as remember account password on the line.

First create a folder to store the package project, enter the folder, the NPM command based on the current path.

Initialize the change folder, that is, NPM Package configuration

NPM init // Initializing NPM configuration // The process is carried out in q&A CLI mode // Q1: package name: (folder name) | will default to the folder's name, can also customize the package name, of course, but need to comply with the NPM naming conventions / / Q2: version: (1.0.0) | version number, the default is 1.0.0, specific rules of the version number, refer to the semantic version 2.0.0 / / Q3: description: | package description, used to describe the main function of the package and use / / Q4: entry point: (index. Js) | entry documents, that is, from the file to execute / / Q5: test the command: | test command, the command for package test, can complement the follow-up about the writing of the test package / / Q6: git repository: | project git repository address / / Q7: keywords: | describe package keyword, for on NPMJS query keyword / / Q8: author: | author's name, you can use NPMJS name, registered mail NPMJS, making registered mail / / Q9: license: (ISC) | open source licenses, the default ISC / / Q10: output package. The content of js and ask Is this OK? (yes) The default value is yes, and press Enter to generate the fileCopy the code

At this point, the initial NPM configuration step is complete, but not the contents of the final package.js file.

I refer to the source code of some open source projects and the information in the NPM module.

At least three folders are found:
dist | src | types

• The dist package is compiled into the final output file
• SRC source file
• Types Support file

The main configuration in package.js at development time points to the package’s execution file
(index. Js). I found it in the source code of open source projects and in the NPM module
mainThe configuration is not pointing to
src/index.jsBut pointing to the
dist/index.js.

Package.js needs to be revamped if packages are to become like many open source NPM modules.

The following configuration information needs to be changed/added to package.js

• Main changes the index.js file with dist/ as the entry
• Module Function module file with dist/ as entry
• Unpkg index.js file with dist/ as entry, unofficial fields for CDN service
• Jsdelivr has the same configuration as UNPKG, with unofficial fields used for CDN services
• Typings support files types/index.d.ts (most NPM packages are developed using TypeScript)
• Configuration files required documents list [” SRC / \ * js “, “dist / \ * js”, “types / \ *. Which s”]

If you need to run test code, you need to write code to run and test it by configuring the **test command**.

So far I’ve seen the use of modular standards fall into two main schools, one is
ES6 One is the
TypeScript. Build using modular packaging tools
rollupIt’s the most used, some of them
gulp.

I chose to use it here
TypeScriptTo write, so it will be
TypeScript + rollupAs an example.

• Rollup Rollup core functions
• @rollup/plugin-buble Convert ES2015 with buble. Compile ES6+ code to the ES2015 standard
• Rollup /plugin-replace Dynamically replaces content in code during compilation
• Rollup /plugin- CommonJS Standard support for CommonJS modules
• @rollup/plugin-node-resolve helps rollup find external modules during compilation and supports merging
• Rollup-plugin-flow-no-whitespace Static type check for flow is ignored during compilation
• Rollup-plugin-typescript2 converts TypeScript to the ES6+ standard

• rollup-plugin-buble
  
  
• rollup-plugin-replace
  
  
• rollup-plugin-commonjs
  
  
• rollup-plugin-node-resolve
  
  

• @babel/core // Babel’s core package
• @babel/plugin-syntax-dynamic-import // Babel asynchronous dynamic import
• Terser // Code compression confusion
• Typescript // If typescript is used

The Rollup options

{input: {// Input configuration: resolve(' SRC /index.js'), plugins: [] // list of plug-ins used}, output: {// Output configuration file: Resolve ('dist/web-storage.js'), // Build file generation path format: 'umd', // build module standard name: 'WebStorage', // export name env: 'development' | | 'production', / / console command environment assessment, if not then don't write transpile: false | | true, / / transparent? Now I can't see the document explaining < - X | custom fields, used to determine whether need buble plug-in in translating build}}Copy the code

Rollup uses Promise to encapsulate the call flow, and subsequent operations are easily handled through the then callback function.

rollup
  .rollup(input) // Enter the configuration input
  .then(bundle= > bundle.generate(output)) // Generate CJS, es min, etc
  .then(bundle= > { console.dir(bundle) }) // Generate generates the result of the source stringCopy the code

After receiving the generated source string, use nodeJS ‘fs.writeFile function to write to the generated file.

To publish a package, log in to NPM

NPM login // login command Username: // enter the Username for registration. Password: // Password Email: (this IS public) // Email address for registrationCopy the code

After login, upload the package to NPM using publish.

NPM publish // publish uses package.js as the package name. NPM I package nameCopy the code

If the package has update code, the version number needs to be updated or it cannot be distributed.

// Unpublish package name // to delete the package on NPMCopy the code

error: cannot be republished until 24 hours have passed.

Delete packages with the same name that have been published in NPM and can be republished 24 hours later

The above is a series of processes from development to configuration to release. In fact, in the initial process of trying to step on a lot of holes, such as some no longer maintain packages and replaceable packages are sorted out. This is implemented in TypeScript, which is a bit of an exercise, but there are some optimizations that can be made.

Currently, I am learning and using TypeScript, but it is not too difficult, mainly a matter of habit and proficiency, and design/solution.

My own wrapped Web Storage API has been published to NPM Publish.

NPM: cat – web – storage

Making: cat – web – storage

Currently only Vue projects are supported.

– Regular Web projects with non-VUE support are also available (development in progress).

– indexedDB API integration is planned (in development).

– ReactJs and AngularJs have great NPM packages, not yet supported.

– NPM package name: cat-web-storage

Copyright Notice:

The copyright of this article belongs to the author Lin Xiaoshuai, shall not be reproduced without authorization and second modification.

Reprint or cooperation, please leave a message and contact information below.