构建场景

ICE PKG 默认支持 React 组件、Rax 组件、Node 模块、前端类库研发场景。你可以执行下面的命令：

$ npm init @ice/pkg my-lib

根据实际研发需求，选择对应的脚手架：

? 请选择项目类型 (Use arrow keys)
❯ React 组件
  Node 模块
  前端类库  
  Rax 组件

React 组件

如果你在多个不同的项目中共同使用了一个或多个 React 组件，那么你可以考虑把这些公共的 React 组件抽成一个 npm 包，这样你就可以在不同的项目中复用组件了。

假设一个 npm 包仅导出一个 React 组件，推荐使用以下目录结构和写法：

src
├── Header        # 子组件 Header
|  ├── index.css
|  └── index.tsx
└── index.tsx

index.tsx
Header/index.tsx

import Header from './Header';

//  通过 export default 方式导出
export default function Component() {
  return (
    <div>
      <Header />
      ...
    </div>
  )
}

import './index.css';

export default function Header() {
  return (<div>Header</div>)
}

这样在消费处可以通过 import Component from 'your-component-name' 的方式导入组件了。

假如一个 npm 包要导出多个不同的组件，也就是类似我们常说的组件库，推荐使用以下的目录组织结构和写法：

src
├── Button
|  ├── index.css
|  └── index.tsx
├── Input
|  ├── index.css
|  └── index.tsx
└── index.ts

index.ts
Button/index.tsx

export * from './Button';
export * from './Input';

import * as React from 'react';

export function Button() {
  return (
    <button>example</button>
  )
}

提示

有关样式的说明和写法请参考构建能力 - CSS 文档。

src/index.ts 作为组件库的入口文件，然后统一导出不同的 React 组件，这样就可以通过 import { Button, Input } from 'your-component-name'; 导入组件了。

Node 模块

如果现在有相同的工具函数在多个 Node 应用被消费，可以把这些公共的函数抽成一个 npm 包，供多个 Node 应用使用。支持经过 Transform 模式生成 CommonJS 产物和 ES Module 产物。

src/index.ts
export function writeLicenseToFileHeader(absFilePath: string) {
  const newFileContent = '/* LICENSE */' + fs.readFileSync(absFilePath, 'utf-8');
  fs.writeFileSync(absFilePath, newFileContent);
}

前端类库

前端类库指的是运行在浏览器环境中的 JavaScript 模块，并且所有的依赖都会打包到这个模块里面。使用的场景有：

类似 React、moment 等类库，用户的项目中把这些依赖 external 掉，需要在 HTML 中通过 <script /> 引入 UMD 产物：

<html>
<head>
  <script src="https://unpkg.com/your-lib-name/dist/index.umd.es5.production.js"></script>
</head>
<body>
  <script>
    console.log(window.YourLibName);
  </script>
</body>
</html>

在 <script /> 标签内通过 ES Module 方式加载类库：

<html>
  <body>
    <script type="module">
      import lib from './index.esm.es2017.production.js';
    </script>
  </body>
</html>

Rax 组件

与 React 组件场景类似，你可以把公共的 Rax 组件抽成一个 npm 包，然后在其他项目中使用。

src/index.tsx
import { createElement } from 'rax';
import styles from './index.module.css';

export default function Component() {

  return (
    <div className={styles.Component}>Hello</div>
  );
}

警告

注意：Rax 组件必须要显式引入 createElement 和 Fragment（如果使用了 <></> 语法），否则在运行时会报错。

组件的目录结构组织和源码写法可参考React 组件。

构建场景

React 组件​

Node 模块​

前端类库​

Rax 组件​

React 组件

Node 模块

前端类库

Rax 组件