Some time ago to encapsulate the plug-in, for the Web end how to open source plug-in, introduce some experience, is to throw a brick to attract jade.

The theme

  • NPM publishes open source plug-ins
  • A rollup configuration
  • Webpack configuration

NPM publishes open source plug-ins

In the daily work of the front end, we basically use engineering libraries, plug-ins, so how to publish a plug-in yourself, to contribute to open source? It’s really simple. There are four steps:

  • account
  • Project code repository
  • Configuration, package.json (NPM init initialization)
  • release

First, an account is a must. To publish external open source, first register an account on NPM. Most large companies have their own internal open source address, so this account could be the company email or something else.

configuration

The project repository is usually gitLab, or github repository. NPM init will automatically generate package.json files.

The explanation of each field as above, ruan teacher’s article is very detailed, the following only say a few and release related

  • version

    • Publish the version of the plug-in
    • name@versionIs the unique identifier of the plug-in, as above, available throughnpm install name@versionInstall and import the plug-in package

  • Scripts field

    • Rollup is a good way to build a library, while Webpack is a good way to build an application
    • Lint code style checking

  • The main field

    • The main field specifies the entry file to load, which requires (‘moduleName’) will load. The default value for this field is index.js under the module root.

release

Go to the packaged root directory, log in to your account, and publish

NPM publish // Must be in the packed root directoryCopy the code

  • Test validation release

    • Once published, it can be usedNPM info package nameCheck whether the release is successful.
    • It can also be installed with the NPM I command and then referenced.

  • Update published packages

    • Modify the version field of package.json
    • NPM publish again
    • The version. Major: indicates a major version. Minor: indicates a minor version. Patch: indicates a patch.

  • Undo published packages

    • The unpublish command is NPM unpublish

    • Unpublish is only allowed with versions published in the last 24 hours

      • If you do want to undo within 24 hours, add the –force parameter

      • Even if the released package is revoked, it cannot be re-released with the same name/version as the previously revoked package, because the uniqueness created by the two packages has been occupied

​

A rollup configuration

Rollup is a great tool for packaging libraries because it supports tree shaking. It eliminates code and modules that are not used in ES6 Module syntax when packaging and compiling into bundles. A natural ability to simplify packaging.

The Tree – the effect of Shaking
  • DCE optimization for cross-file code.
  • Depends on ES6 Module features.
  • Eliminate export modules that are not imported.
  • Function Function module processing effect is good.
configuration

There are several necessary Babel plugins available online, which are related to the es module you use for your project, rollup. Config, and js configurations

format
Environment Output Format
Browser iife
Node.js cjs
Browser + Node.js umd

Create a new SRC folder, create main.js(the application entry), and export the packaged file

module.exports = require('./dist/name.js');
Copy the code

Webpack configuration

The webPack configuration is roughly the same as the rollup configuration, except for the libraryTarget field setting, which defaults to Default for libraryExport.

The main file is also used to export.