Before and friends to do some project learning often write some repeated code, and then copy and paste into the next project to use, such as written before localStorage, sessionStorage and other API function encapsulation implementation. Assuming that your project needs to use the wrapped API, you need to copy and paste it yourself, and if you find any improvements or modifications, you need to overwrite the modified file on every project that uses it.

This approach is too time-consuming and difficult to manage. Then I wondered if NPM package, which is often used, could also be managed on it. And there is a version number to choose different versions, also to solve the problem of using different versions of the implementation, if there are fixes and updates can be synchronized…

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

Weaknesses? There are also. If you’re thinking about going public, start maintaining your code for the long term. If you don’t consider it and use it for yourself (and don’t use it on company projects) then there’s no downside.

Ok, so without further ado, let’s introduce the process.

01 – Set up an NPMJS account

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

Registration address: www.npmjs.com

This is simple, also don’t say much, as long as remember the account number password line.

02 – Initialize the package project

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

Initialize the change folder, the NPM Package configuration

// 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. Press Enter to generate the fileCopy the code

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

03 – Write code

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

Found that need at least three folders: dist | SRC | types

  • Dist package after compilation of the final output file
  • SRC source file
  • Types Type support files

Entrance to the problem

The main configuration in package.js during the development phase is to point to the package’s execution file (index.js). In the source code of the open source project and the NPM Module, I found that the configuration of main is not pointing to SRC /index.js but to dist/index.js.

04 – Package. js transformation

Package.js needs to be revamped if the package is 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 entry dist/
  • Module Function module file with dist/ as entry
  • Unpkg Index. js file with dist/ as entry. Unofficial fields are used for CDN service
  • Jsdelivr is the same as unPkg. The unofficial field is used for the CDN service
  • Types /index.d.ts (most NPM packages are developed in TypeScript)
  • Configuration files required documents list [” SRC / *. Js “, “dist / *. Js”, “types / *. Which s”]

If you need test run code, you need to write code to run and test the code by configuring the Test Command.

05 – Modular standard

So far I’ve seen two major schools of using modular standards, ES6 and TypeScript. Rollup is the most commonly used modular packaging tool for the build, with some using Gulp.

I’ve also chosen to write in TypeScript, so I’ll use TypeScript + rollup as an example.

A Rollup required packages

  • Rollup Rollup Core functions
  • @rollup/plugin-buble Convert ES2015 with buble. Compile ES6+ code to ES2015 standard
  • Rollup /plugin-replace dynamically replaces the contents of the code during compilation
  • Rollup /plugin- CommonJS CommonJS module standard support
  • Rollup/plugin-nod-resolve helps rollup find external modules and support merge during compilation
  • Rollup-plugin-flow-no-whitespace ignores the flow static type check during compilation
  • Rollup-plugin-typescript2 converts TypeScript to the ES6+ standard

Packages no longer maintained

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

Extra package used

  • @babel/core // The core package of Babel
  • @babel/ plugin-syntactic -dynamic-import // Babel asynchronous dynamic import
  • Terser // Code compression obfuscation
  • Typescript // If you use typescript

The use of a Rollup

The Rollup options

{
  input: { // Enter the configuration
    input: resolve('src/index.js'),
    plugins: [] // The list of plugins to use
  },
  output: { // Output configuration
    file: resolve('dist/web-storage.js'), // Build file generation path
    format: 'umd', // Build the module standard
    name: 'WebStorage', // Name the export
    env: 'development' || 'production', // Do not write the command based on the console command environment
    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}}Copy the code

Rollup uses a Promise to wrap the call process, and all subsequent actions are handled conveniently through the THEN callback function.

rollup
.rollup(input) // Input Configure input
.then(bundle= > bundle.generate(output)) // Output configuration output, through the generate function to generate source specifications: CJS es min, etc
.then(bundle= > { console.dir(bundle) }) // Generate the result of the source string generated by the function
Copy the code

After getting the generated source string, write to the generated file using nodeJS’s fs.writeFile function.

06 – Publish packages to NPM

To publish a package, log in to NPM

NPM login // login command Username: // enter the Username for registration. Password: // enter the Password. Email: (this IS publicCopy the code

Once logged in, you can upload the package to NPM using Publish.

NPM publish // publish will use the package name attribute in package.js // wait a while, and you can install it via install. NPM I package nameCopy the code

If the package has update code, then the version number needs to be updated, otherwise it cannot be released.

07 – Remove packages from NPM

// Log in to the NPM unpublish package to delete the package from the NPMCopy the code

error: cannot be republished until 24 hours have passed.

Remove a package with the same name that has been published in NPM, and it will take 24 hours for it to be republished

The last

The above is a series of processes from development to configuration to release, in fact, in the first attempt to step a lot of holes in the process, such as some no longer maintenance packages and replaceable packages are sorted out. This process is implemented in TypeScript, which is a real fight, but the code can be optimized.

I’m still learning and using TypeScript, but it’s not too difficult. It’s just a matter of habit and familiarity and design/solution thinking.

My own encapsulated Web Storage API has been published on NPM Publish.

NPM: cat – web – storage

Making: cat – web – storage

For now, only Vue projects are supported.

  • Regular Web projects with planned support for non-VUE can also be used (under development).
  • There are plans to integrate the indexedDB API as well (under development).
  • ReactJs and AngularJs have good NPM packages, so we won’t consider supporting them for now.
  • 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.