Skip to content

Latest commit

 

History

History
132 lines (114 loc) · 5.22 KB

develop-install.md

File metadata and controls

132 lines (114 loc) · 5.22 KB
Raw

Development and Installation

Directory Structure

In order to accommodate various installation scenarios, we have defined a standard for component build output. You can choose the installation method you need according to the following component output directory structure:

├─ dist                        ## umd
│   ├─ tdesign.js
│   ├─ tdesign.js.map
│   ├─ tdesign.min.js
│   ├─ tdesign.min.js.map
│   ├─ tdesign.css
│   ├─ tdesign.css.map
│   └─ tdesign.min.css
├─ esm                                ## esm
│   ├─ button
│        ├─ style
│             └─  index.js
│        ├─ button.js
│        ├─ button.d.ts
│        ├─ index.js
│        └─ index.d.ts
│   ├─ index.js
│   └─ index.d.ts
│
├─ es                                ## es
│   ├─ button
│        ├─ style
│             ├─ css.js
│             ├─ index.css
│             └─ index.js
│        ├─ button.js
│        ├─ button.d.ts
│        ├─ index.js
│        └─ index.d.ts
│   ├─ index.js
│   └─ index.d.ts
│
├─ lib                            ## cjs
│   ├─ button
│        ├─ button.js
│        ├─ button.d.ts
│        ├─ index.js
│        └─ index.d.ts
│   ├─ index.js
│   └─ index.d.ts
│
├─ LICENSE
├─ CHANGELOG.md
├─ README.md
└─ package.json

Output Explanations

dist

  • Package all component code and styles, generating separate one JS file and one CSS file
  • Ensure compatibility with modern browsers and support for server-side rendering
  • Build JS files using the UMD (Universal Module Definition) standard
  • JS/CSS files should support browser script/link tags and integration with mainstream build tools (Webpack, Rollup, etc.)
  • JS files must generate corresponding .min and .map files for online resource loading and debugging
  • common/style/(web|mobile)/index.less is the build entry point
  • Generate an uncompressed tdesign.css and tdesign.css.map under the dist directory Compress tdesign.css to generate tdesign.min.css

es

  • Compile each component's TypeScript code separately, generating corresponding JS files and type declaration files
  • Ensure compatibility with modern browsers and support for server-side rendering
  • Use the ES Modules standard for component import/export, supporting tree-shaking; in es/index.js, export each component separately with content identical to src/index.ts
  • Generate a style directory under the component folder to store the compiled CSS style files
  • The component folder include type declaration files \*.d.ts
  • Inject the Babel runtime helpers used in the compiled component code into each component
  • Only compile component code, without compiling test files or documentation files, etc.

esm

  • Compile each component's TypeScript code separately, generating corresponding JS files and type declaration files
  • Ensure compatibility with modern browsers and support for server-side rendering
  • Use the ES Modules standard for component import/export, supporting tree-shaking; in esm/index.js, export each component separately with content identical to src/index.ts
  • Generate style/index.js within the component folder, linking to the uncompiled less style files
  • The component folder include type declaration files \*.d.ts
  • Inject the Babel runtime helpers used in the compiled component code into each component
  • Only compile component code, without compiling test files or documentation files, etc.

lib

  • Compile each component's TS code separately, generating corresponding JS files and type declaration files
  • Ensure compatibility with modern browsers and support for server-side rendering
  • Use the CommonJs Modules standard for component import/export; in lib/index.js, export each component separately with content identical to src/index.ts
  • The component folder must include type declaration files \*.d.ts
  • Inject the Babel runtime helpers used in the compiled component code into each component
  • Only compile component code, without compiling test files or documentation files, etc.

package.json

{
    ...
    "files": [
        "es",
        "esm",
        "lib",
        "dist",
        "LICENSE",
        "README.md",
        "CHANGELOG.md"
    ],
    "sideEffects": [
        "dist/*",
        "site/*",
        "examples/*",
        "es/**/style/**",
        "esm/**/style/**"
    ],                                  // for tree-shaking
    "main": "lib/index.js",             // default entry point
    "module": "es/index.js",            // entry point to ES modules
    "unpkg": "dist/tdesign.min.js",     // entry point to unpkg
    "jsdelivr": "dist/tdesign.min.js",  // entry point to jsdelivr
    "typings": "lib/index.d.ts",        // TypeScript declaration
}

Installation

The default component package's main entry points to lib/index.js, and the ESM entry points to es/index.js.

We recommend using bundling tools that support tree-shaking, such as Webpack or Rollup, which will only bundle the code you actually use.

For more specific installation methods, please refer to the instructions in each component library's documentation.