Publish components to Npm using TypeScript + React

Recently packaged the React map component used in the project and released it to NPM. I also learned scattered knowledge points, such as TypeScript, Commit specification/version semantics, React component testing, Npm release and update, Readme template, component document construction, etc. Some of the knowledge points are also superficial (only a little understanding 😱), first write down, later have time to dig deeply.

✨ GitHub home: github.com/nihaojob/ma…
IO /carui/#/car…
Npm homepage: www.npmjs.com/package/map…

1. Scaffolding selection

There are a lot of scaffolders out of the box with zero configuration. I use TSDX.

Create-react-library is available in Chinese
create-react-hook Hook + TypeScript
nwb
tsdx

If you have any recommended or better scaffolds, please let me know 😘 and save them for next time.

2. TSDX use and configuration

Less and ESLint can be configured manually as follows:

Less configuration

Installing dependent plug-ins

$ yarn add rollup-plugin-postcss autoprefixer cssnano less --dev
Copy the code

Modify the tsdx.config.js configuration file

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',})],inject: false.// only write out CSS for the first bundle (avoids pointless extra files):
        // extract: !! options.writeMeta,
        extract: 'mapLine.min.css',}));returnconfig; }};Copy the code

ESLint configuration

The scaffold created project does not have.eslintrc.js and.eslintignore files, which need to be added manually.

You can also generate yarn lint –write-file, as described in the documentation.

. Eslintrc. Js file:

module.exports = {
  "extends": [
    "react-app"."prettier/@typescript-eslint"."plugin:prettier/recommended" / / the key]."settings": {
    "react": {
      "version": "detect"}}}Copy the code

Start the preview

The source code can be previewed in the SRC directory. You need to install dependencies and Start respectively in the root directory and example directory, starting from the root directory and then example Start.

Refer to the tutorial

3. The TypeScript

Starting out with TypeScript, you’ll probably write anyScript-style code like 🙋 (I wrote it).

How to get started with TypeScript 👍

I first wrote functionality in JSX and then migrated to TypeScript to document a few common Interface definition syntax.

Not a choice

In a type definition, some attributes are optional parameters, using? Logo.

interfaceanime { show? :boolean; icon? :string; pathColor? :string;
  type? :string;
}
Copy the code

An array type

To place objects in an Array, you can define them using Array

or InterfaceName[].

interface pathItem {
  iconText: string;
  title: string; theme? :number;
}

interface defaultOptions {
  path: Array<pathItem>; pathColor? :string; donePath? : pathItem[]; }Copy the code

Unknown attributes, inheritance

[propName: string]: string; [propName: string]: string; Definition; To avoid duplication, use the extends keyword to inherit from other interfaces.

Code:

interface pathItem extends donePathItem {
  iconText: string;
  title: string;
  [propName: string] :any;
}

interface donePathItem {
  LT: number[];
}
Copy the code

4. Commit specification

Git rebase: Git rebase: Git rebase: Git rebase: Git rebase

Ruan Yifeng: How to write Commit Message and Change log
Contract submission
Angular submission guidelines in English

Seven categories

I reviewed the commit and specification for several open source projects, mainly identifying seven categories of commit.

- feat: feature - fix - docs - style: feat: feature - fix - docs - refactor: Refactoring (i.e., code changes that are not new features or bug fixes) - test: adding tests - chore: changes to the build process or choreCopy the code

Use VsCode plug-in

Personally, I mainly Commit in VsCode, and recommend 2 plug-ins.

Quick message generation: git-commit-plugin

Commit Displays Git History

Command Line Configuration

With Git on the command line, you can use Commitizen to generate a Commit Message template and check it with Commitlint. See tutorial.

5. Npm release/configuration/update

Registration is no longer redundant, I so stupid people can fix, smart you must be no problem 👩🎓, the following is the details.

Package path

After yarn Build is used to package the file, the file is generated in the dist directory. Check that main in package.json is the same as the package path.

Home page and warehouse address

The correct configuration of homepage and Repository is displayed in the Npm introduction.

{
  "homepage": "http://nihaojob.gitee.io/carui/#/carui/maps"."repository": {
    "type": "git"."url": "git+https://github.com/nihaojob/mapLine.git"}},Copy the code

release

Many domestic partners have set up NPM mirror source, remember to restore to the official, and then according to the prompt input information is successful, simple 💁?

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

update

After modifying the Readem file, use the following command to update it.

Official documentation: docs.npmjs.com/about-packa…

$NPM Version Patch // 1.0.1 for minor bug fixes $NPM Version Minor // 1.1.0 for minor features $NPM Version mMajor // 2.0.0 for major version or major upgrade $ NPM version preminor // 1.1.0-0 $NPM unpublish [email protected] Delete a version $NPM unpublish [email protected]Copy the code

$NPM version patch $NPM publish $NPM publish --tag=betaCopy the code

Version should also follow the specification, there is no time to dig deep, leave the pit 🏌.

Semantic version 2.0.0: semver.org/lang/zh-CN/

6. The Readme template

Readme should tell people why they should use it and how to install and use it. Pit optimization 🏌.

The template

A high Start template is recommended: standard-Readme.

Readme files can also be generated interactively using the readME-MD-generator.

Logo generated

Shields. IO automatically generates the logo from the GitHub repository.

CI logo

Once GitHub’s Actions are successfully executed, the logo can be copied from the CI page.

Ruan Yifeng: GitHub Actions tutorial

Test coverage logo

A variety of tools and methods, I have not learned, so I update 🏌.

7. The React test

TSDX does not automatically generate the jest. Config. js file, if you need to define, can be manually added to the list of encountered problems.

Error reporting less in component

Install dependencies

$ yarn add --dev identity-obj-proxy
Copy the code

Package. ModuleNameMapper json configuration

{
 "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"."\\.(css|less)$": "identity-obj-proxy"}}},Copy the code

document is not defined

Add environment description, example to test file header.

/**
 * @jest-environment jsdom
 */
Copy the code

Introducing third-party SDKS

I used autonavi global variables in the component, and the test should be performed after the SDK file of Autonavi is loaded, referring to the implementation of React – AMap.

/ / PromiseScript load
function getAmapuiPromise() {
  const script = buildScriptTag(
    'https://webapi.amap.com/maps?v=1.4.15&key= you key&plugin = AMap. Driving'
  );
  const p = new Promise(resolve= > {
    script.onload = () = > {
      resolve();
    };
  });
  document.body.appendChild(script);
  return p;
}
// Create the script tag
function buildScriptTag(src: string) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.async = true;
  script.defer = true;
  script.src = src;
  return script;
}

describe('it'.() = > {
  it('Normal Render'.() = > {
    // Execute autonavi after loading
    getAmapuiPromise().then(() = > {
      initDemo();
    });
    function initDemo() {
      const div = document.createElement('div');
      ReactDOM.render(<Maps {. options} / >, div); ReactDOM.unmountComponentAtNode(div); }}); });Copy the code

8. Component document building

There are many similar tools, mainly to solve the problem of component documentation.

Bisheng Ant series is in use
Dumi umi series
VuePress Vue
Redemo Tencent produces a single component
Docz
The Gatsby. Js React website is used

I chose Dumi because the documentation is good 💁 and dumi has just been released, but the experience is really good.

The official introduction is: is a document tool based on Umi, for component development scenarios.

gitee.com/nihaojob/Ca…

Pit and summary

There are still a lot of things to be done, and there are more and more things to learn. For quality and landing, let’s list ToDoList first.

Talented and uneducated, please be correct, also please Stars, praise to encourage 💁.

GitHub Project: github.com/nihaojob/ma…