# 打包流程 *** Typescript files.tsx - tsc -> ES6 modules.jsx - 入口文件引用需要的文件 index.tsx - module bundler(e.g webpack, rollup) -> 浏览器可以使用的一个或多个 js 文件。 # 创建组件库模块入口文件 *** ``` // index.tsx import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' library.add(fas) export { default as Button } from './components/Button' export { default as Menu } from './components/Menu' export { default as AutoComplete } from './components/AutoComplete' export { default as Icon } from './components/Icon' export { default as Input } from './components/Input' export { default as Progress } from './components/Progress' export { default as Transition } from './components/Transition' export { default as Upload } from './components/Upload' ``` 另外注意，在每个组件文件夹下新建 index.tsx，例如 Menu 组件下的: ``` import { FC } from 'react' import Menu, { MenuProps } from './menu' import SubMenu, { SubMenuProps } from './subMenu' import MenuItem, { MenuItemProps } from './menuItem' export type IMenuComponent = FC<MenuProps> & { Item: FC<MenuItemProps>, SubMenu: FC<SubMenuProps> } const TransMenu = Menu as IMenuComponent TransMenu.Item = MenuItem TransMenu.SubMenu = SubMenu export default TransMenu ``` 上面的代码的作用是简化了入口文件的导入，这里 MenuItem 和 SubMenu 就作为 Menu 的子模块了。 # tsc *** tsc 的配置都在 tsconfig 中，新建 tsconfig.build.json 以区别于开发时的 tsconfig.json ``` { "compilerOptions": { "outDir": "dist", // 编译好的文件路径 "module": "esnext", // 输出 module 类型，有 UMD, ADM 等等 "target": "es5", // 转换 JavaScript 版本，babel "declaration": true, // 让用户使用时获得类型检查，添加 .d.ts "jsx": "react", // "moduleResolution":"Node", // 引入模块时解析路径的方式 "allowSyntheticDefaultImports": true, // 去官网搜...... }, "include": [ // 需要编译的文件 "src" ], "exclude": [ // 不希望被编译的文件 "src/**/*.test.tsx", "src/**/*.stories.tsx", "src/setupTests.ts", ] } ``` # packjage.json 添加命令 *** packjage.json script 添加 ``` "build-ts": "tsc -p tsconfig.build.json" ``` 执行后会发现每个 ts 文件下会生成 .js 文件