Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

For a similar source code about custom JS tool classes, see gitee.com/ykang2020/m…

Package and publish relevant custom modules

【JS】 custom JS tool library – Wrapper array advanced methods -unique-cancat-slice-flatten-chunk-difference-pull-drop

【JS】 custom JS tool library – custom object method -new-instanceof-mergeObject- implement array and object deep copy and shallow copy – encapsulate string related functions

Etc.

This is my version of Node and NPM

1. Export all modules

// Expose the function-related API
export { apply } from "./function/apply";
export { bind } from "./function/bind";
export { call } from "./function/call";
export { debounce } from "./function/debounce";
export { throttle } from "./function/throttle";

// Expose the array related API
export { chunk } from "./array/chunk";
export { concat } from "./array/concat";
export {
  map,
  reduce,
  filter,
  find,
  findIndex,
  every,
  some,
} from "./array/declares";
export { difference } from "./array/difference";
export { drop, dropRight } from "./array/drop";
export { flatten } from "./array/flatten";
export { pull, pullAll } from "./array/pull";
export { slice } from "./array/slice";
export { unique } from "./array/unique";

// Expose object related apis
export { clone1, clone2 } from "./object/clone";
export {
  deepClone1,
  deepClone2,
  deepClone3,
  deepClone4,
} from "./object/deepClone";
export { mergeObject } from "./object/mergeObject";
export { myInstanceOf } from "./object/myInstanceOf";
export { newInstance } from "./object/newInstance";

// Expose string-related apis
export { reverseString, palindrome, truncate } from "./string/reverseString";

// Expose event related apis
export { myAddEventListener } from "./eventBind/myAddEventListener";
export { eventBus } from "./eventBind/eventBus";
export { PubSub } from "./eventBind/myPubSub";
Copy the code

Delete all default keywords previously exposed by default in modules

2. Configuration webpack

const path = require("path");
module.exports = {
  / / the entry
  entry: "./src/index.js"./ / export
  output: {
    // Pack the folder
    publicPath: "dist".// Package the file
    filename: "yk-utils.js".// Set the global name of the exposed object
    library: "ykUtils".// Package generation is introduced via esM, CommonJS, requirejs syntax
    libraryTarget: "umd",},/ / configuration webpack - dev - server
  devServer: {
    // Static root directory
    contentBase: "www"./ / the port number
    port: 8080,}};Copy the code

Pack 3.

packjson.js

  "scripts": {
    "dev": "webpack-dev-server"."build:watch": "webpack --watch"
  },
Copy the code

run

npm run build:watch
Copy the code

Generated package file

4. Test

Create a new HTML file, import the packaged JS file, and test it

  <script src=".. /dist/yk-utils.js"></script>
  <script>
    console.log(ykUtils.reverseString('abcdef'))
  </script>
Copy the code

5. Change the package description file

packjson.js

• Name: Must be a unique name (there is no name in the NPM online central repository)
• Main: Must specify the JS file generated for packaging
• Keywords: specify some convenient for other programmers to search the current library keywords

{
  "name": "mine-own-util"."version": "1.0.1"."description": ""."main": "./dist/atguigu-utils.js"."directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build:watch": "webpack --watch"
  },
  "keywords": [
    "atguigu"."utils"."array"."object"."function"."string"."axios"."event-bus"."pub-sub"]."author": "yk2012"."license": "ISC"."dependencies": {
    "webpack": "^ 5.16.0"."webpack-cli": "^ 4.4.0"}}Copy the code

6. The configuration of NPM

npm get registry
Copy the code

View their NPM configuration, before whether to change taobao mirror

Note: The central repository configured by NPM at release time cannot be a Taobao mirror

So change back to NPM official address

npm config set registry https://registry.npmjs.org/
Copy the code

NPM is replaced by CNPM

Usually do not release when can be changed to Taobao mirror:

npm config set registry http://registry.npm.taobao.org/
Copy the code

Go to the official website to register an NPM account

Then log in to the NPM account

npm login
Copy the code

7. Release the repository

npm publish
Copy the code

At this point, it has been uploaded to the NPM central repository

Anyone can download this package

Test 8.

Create a new folder

Download package

You can see it has been downloaded

use

// Import using ESM
import {test} from 'yk-utils'
test()
Copy the code

// Use commonJS to import
const {test} = require('yk-utils')
test()
Copy the code

9. Update and delete

Update package

Modify the version number of the content and then re-package the final upload can be

Delete the package

It must be deleted within 72 hours; otherwise, it cannot be deleted

npm unpublish --force
Copy the code

To avoid contaminating the central repository, force the just published package to be deleted

For a similar source code about custom JS tool classes, see gitee.com/ykang2020/m…