Publish a user-friendly and maintainable NPM package (for example, publish a deep-copy package)

On the first picture

What is a safe to use and maintainable NPM package

  • The released package can be built successfully
  • Distributed packages are tested by test cases and have test case coverage to a degree that only tested users can safely use
  • Publish packages that conform to code specifications, submit specifications (enable users involved in project maintenance to use the same set of code specifications)

Write and publish an NPM process using a deep-copy package as an example

  • Set up the package.json file
  • Webpack configuration
  • Example Configure eslint and prettier
  • Write deep copy methods
  • Write unit tests/run tests/test reports
  • Use Git CZ to make submitted code more formal
  • Format the code before committing
  • On the lot
  • Automate builds and tests
  • Project badge Setting
  • Publish a package

Package. json configuration

NPM init creates package.json file and configures my package.json file

Package. json file Configuration reference document

  • Creating a package.json file
  • NPM new package name specification
  • NPM package structure
  • NPM package description file with NPM
  • NPM version number specification

4. Webpack configuration

Webpack does that for us

  • Package JS files
  • The support of the es6

How to configure

  • Configuration file entry and exit
  • Babelrc supports ES6

Webpack configuration reference documentation

  • Webpack official Chinese guide
  • Babel configuration ps: we will write an article about webpack configuration later

Write deep copy methods

Implement deep copy arrays and objects. Functions and Date types are not deep-copied.Copy the code

Add unit tests

Why unit test Only if you pass unit tests and have a certain level of test coverage will users be comfortable using your distributed packages

How to unit test

  • Use Mocha for unit testing
  • Use Chai expect for the assert library (there are plenty of options to use nodeJS’s native Assert library)
  • Use NYC to generate test coverage (Istanbul also works)
  • Write test cases

NPM I Chai Mocha NYC-d

Reference documentation

  • Mocha official tutorial
  • Ruan Yifeng test framework Mocha example tutorial
  • Chai’s official website
  • I refer to the READme of the NPM package

Ps: Using import in the test file requires importing the @babel/register package (rewrite the require command and add a hook to it). .js,.jsx,.es, and.es6 files will be transcoded with Babel before using nyc mocha –require @babel/register -r spec test

Git cz Commit message

Reference Documents:

  • Commitizen uses official documentation
  • Ruan Yifeng Commit message and Change log writing guide

8. Eslit and prettier configuration

Husky and Lint-passively formatted code submitted in conjunction with Eslit and Prettier so that submitted code can be standardized

Reference Documents:

  • Eslint official documentation
  • Prettier official document
  • Use Husky, prettier, ESLint to automatically format and inspect code when it is submitted

CI/CD continuous integration service, automatic build and automated testing

  • Travis – CI Travis CI provides Continuous Integration (CI) services. It binds to projects on Github and automatically grabs new code whenever it comes in. Then, provide a run environment, perform tests, complete builds, and deploy to the server.

Continuous integration refers to automatically running builds and tests whenever code changes and reporting back the results. After making sure that it is as expected, “integrate” the new code into the trunk.

The benefit of continuous integration is that every time you make a small change to your code, you can see the results, accumulating small changes over time, rather than merging a large chunk of code at the end of the development cycle.

  • Travis – CI official documentation

  • Javascript Width Nodejs.travis. Yml configuration tutorial

  • Ruan Yifeng Continuous Integration Service Travis CI tutorial

  • codecov

Improve your code review workflow and quality. Codecov provides highly integrated tools to group, merge, archive, and compare coverage reports

There are fewer online tutorials to write your own
  • Add the following command to the.travis. Yml file 
    -sudo PIP install codecov -sudo PIP install codecov -npm test // Run test cases -npm run report-coverage // Generate test reports
  • Add to package.json file 
    "Test ": "nyc mocha --require @babel/ regime-r spec test", // execute test case "report-coverage": "Nyc report -- Reporter =text-lcov > coverage. Lcov && codecov" // Upload test report

Reference documentation

  • Codecov official documentation
  • Codecov js node environment example

10. Github badge Settings

  • Github badges set up the official website

11. Release packages