sequence

The company chose Angular for its tech show and Google’s Mateiral Design. The Official Google team provides a Material Angular version of the component library, Material. Angular. IO. However, there are still some differences between Chinese and foreign operating habits. For this part of business, the company plans to encapsulate some customized components based on official components and open source them. In this process, the following aspects were considered. Hope to be helpful to everyone’s open source project. There are many shortcomings (´ ▽ ‘).

Welcome to Github Star

  • Debug
  • Demo and Demo source code
  • Build
  • Making open source
  • NPM release

The directory structure

Debug

The Debug phase is mainly concerned with path import. In order to keep the Demo source code consistent with the production environment, some configurations are made in PROJECT_ROOT/tsconfig.json (PROJECT_ROOT refers to the project root directory)

{... "compilerOptions": { "baseUrl": ".", "paths": { "@petkit/*": [ "./src/lib/*" ], "demo/*": [ "./src/demo/*" ], "util/*": [ "./src/util/*" ] } } ... }Copy the code

Convert all @petkit/ paths to SRC /lib/

schema

import { NgxHighlightModule } from '@petkit/ngx-highlight';
Copy the code

Will be converted to

import { NgxHighlightModule } from 'PROJECT_ROOT/src/lib/ngx-highlight';
Copy the code

Demo and Demo source code

Here we refer to the design of Angualar Material official team (here the concept of Demo and Example is different from the official one, the official Example code is put in the Example directory, I think it is ok, but the project has been prepared, so I don’t want to adjust to the official one).

material 2

Use all files in the Demo directory as static resources, requesting source code over HTTP, using ngX-highlight syntax. Angular. json is configured as follows

{
  "projects": {
    "example": {
      "root": "."."sourceRoot": "src/example"."architect": {
        "build": {
          "options": {
            "assets": [{"glob": "* * / *"."input": "src/demo"."output": "assets/demo"
              },
              "src/example/assets"]}}}}}}Copy the code

Note: sourceRoot is the relative path of ng g *

Example is the same as demo

{..."assets": [
    // Error: The src/demo asset path must start with the project source root.
    "src/demo"."src/example/assets"]... }Copy the code

Demo will be output as static resources to dist/ Example/Assets/Demo. In this case, use HTTP to request the corresponding path files.

Build

There is already a library ng Packagr to help you package directly

ng-packagr

ng-packagr -p ./src/**/package.json
Copy the code

Making open source

Git submodule for lib source code can help maintain open source components.

Git submodule SegmentFault git submodule

git submodule add [email protected]:petkit-io/ngx-highlight.git src/lib/ngx-highlight
Copy the code

NPM release

Ng-packagr packaged code can be published directly.

npm publish path --access public;
Copy the code

Organization on NPM requires — Access public to publish. After each release, CHANGELOG is automatically generated and a new version is entered.

Convention-changelog can help us automatically generate Change Log commitlint and can help us normalize commit messages

automation

Build Github NPM three stages can be automatically executed by script. PROJECT_ROOT/bin/pub. Sh:

#! /usr/bin/env bash
libRoot=src/lib;
distRoot=dist;

buildLib() {
  packagePath=The $1;

  npx ng-packagr -p $packagePath;
}

publishLib() {
  libName=The $1;
  libPath=$libRoot/$libName;

  buildLib $libPath/package.json;
  npm publish $distRoot/$libName --access public;

  cd $libPath;
  git add .;
  git commit -m "chore(version): publish npmjs" 1>/dev/null 2>&1;
  npm version patch;
  git push;
  git push --tags;
}

publishLib The $1
Copy the code

Maidfile. Md:

## pubPublish library command format`npx maid pub [lib-name]`

e.g.
- `npx maid pub ts-lib`
- `npx maid pub ngx-material`

```bash libName=$1 command="./bin/pub.sh $libName" echo $command $commandCopy the code

Use:

npx maid pub ngx-highlight
Copy the code

End

There are still some imperfections in the overall structure. I hope you can give me some suggestions and we will improve it gradually.

Star Star Star important things say three times O (≧ V ≦)o