# 打包流程 *** 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 文件