Introduction to the

Here is a summary of a simple NPM package building, packaging, debugging, release base point.

Involves the content

  • NPM initialization
  • Package. The json configuration
  • Eslint configuration
  • Babel configuration
  • A rollup packaging

Package the initialization

CD my-pkg // NPM initializes NPM init-yCopy the code

Package. The json configuration

{
    name: 'my-pkg', / / package name
    main: 'lib/index.js',  // Import file for package loading
    version: 0.01../ / version
    description: '', / / description
    author: 'copy-left', / / the authorcontributors: '... ',Other contributors
    dependencies: {}, // Production dependency
    devDependencies: {}, // Develop dependenciesThe repository: "',// Source code address
    keywords: ['test pkg', 'copy-left'], // Package search keyword
}

Copy the code

Key configuration:

  1. Name Package name. To avoid the package name being used, you can search the relevant name field in NPM in advance to see if the package name is already used
  2. The import address of the main package. When a package is imported into a project, it is used to find the corresponding import file.
  3. Version Indicates the version number. Each time you submit a package to the NPM, ensure that the current package version is different from the released package version, but do not specify the version format. For example: the current online package version is V1.1.1, my local package version is set to v1.0.0, it does not affect my release.

eslint

In general, we want the overall code style to be consistent, so as to reduce unnecessary communication costs when multiple people are developing or adding new features at the same time. Eslint also helps us prevent low-level writing errors such as undeclared variables and repeated introductions

The installation
npm i -D eslint
Copy the code
Create configuration file.eslintrc.[File type]

Eslint can be configured using package.json or a separate configuration file, as described in the ESLint documentation

touch .eslintrc.yml
Copy the code
Configuration file
env: // Es6 global variables are supported
  es6: true
  browser: true
extends: eslint:recommended // Using eslint The default rules
parserOptions:  
  ecmaVersion: 2019  // Es6 syntax verification is supported
  sourceType: module // Use es6 module syntax
rules:  // Custom rule configuration
  indent: 
    - error
    - 2
Copy the code

babel

To support ES6 syntax, you need to introduce Babel as a transformation

The installation

npm i -D @babel/core @babel/preset-env  @babel/plugin-transform-runtime

Copy the code
Creating a Configuration File
touch .babelrc
Copy the code
Configuration file
{
  "presets": [["@babel/preset-env",
      {
        "modules": false."useBuiltIns": "usage"."corejs": "2.6.10"}]],"plugins": [["@babel/plugin-transform-runtime"]],"ignore": [
      "node_modules/**"]}Copy the code

rollup

Because we were using ES6 and wanted the package to run in multiple environments. So we need to use the packaging tool

Install a rollup

npm i -D rollup

Copy the code
Install the rollup plug-in
npm i -D rollup-plugin-node-resolve  rollup-plugin-commonjs rollup-plugin-babel rollup-plugin-eslint

Copy the code
Create the rollup.config.js configuration file
touch rollup.config.js
Copy the code
Configure a rollup

import resolve from 'rollup-plugin-node-resolve'; // Rely on reference plug-ins
import commonjs from 'rollup-plugin-commonjs'; // CommonJS module conversion plug-in
import babel from "rollup-plugin-babel"; / / the Babel plug-in
import { eslint } from 'rollup-plugin-eslint'; / / eslint plug-in

export default {

  input: './src/main.js'.// Package the entry file
  output: {name: 'my-pkg'.// The package name entered
    file: './bin/index.js'.// Package the output address, where the export address is the address of main in the package
    format: 'umd' / / package type
  },
  plugins: [  // The plug-in to use
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**'.runtimeHelpers: true,
    }),
    eslint({ 
      throwOnError: true.include: ['src/**'].exclude: ['node_modules/**']})],ignore: [
    "node_modules/**" // Ignore the directory]}Copy the code

If you need to merge multiple files into the same file, you can use the associated rollup plug-in package,

The configuration exported here can also be a configuration array, representing multiple packaged configurations. It can handle multiple files and inputs simultaneously

Add a package command
// package.json{..."script": {
       // Specify the configuration file that rollup runs and listen for file changes.
       "dev": "rollup -c rollup.config.js -w"."build": "rollup -c rollup.config.js",}-c Executes the configuration file
    // -w listens for file changes and repackages files after changes
}

Copy the code

Write the source code

// SRC /main.js export function call(){console.log('copy-left!!! ')}Copy the code

packaging

npm run build
Copy the code

debugging

Register local packages globally via NPM link. We can reference our own packages within other packages.

Here we create a test test directory under the root directory to simulate the introduction and use of the package

Create test directory
md test
touch test/index.js
Copy the code
Global Registration package
// In the root directory/PKG NPM linkCopy the code
Importing local packages
// test directory NPM link my-pkgCopy the code
Write debugging

// /test/index.js 

const myPkg = require('my-pkg')
myPkg.call()

Copy the code

Because node calls directly here, node’s package-import approach.

Published to the NPM

  • Register an NPM account on the NPM website
  • NPM login Logs in to the NPM
  • NPM publish Publish package

Note the address of NPM when using CNPM, NRM, etc. The current NPM source address needs to be switched back to the original NPM address.

The related documents

  • eslint
  • rollup
  • npm
  • How to package front-end components/libraries using Rollup