New: 增加项目入口文件

README.md

@@ -672,4 +672,36 @@ describe('test upload component', () => {
       status: 'success',
       name: 'test.png'
     }))
-```
+```
+
+### js 模块化
+以前的 js 就是通过引入不同的文件，到后来通过自执行函数，来定义全局变量，到现在的 commjs、amd、es6 module：
+```js
+// common.js
+const bar = require('./bar')
+// 模块产出
+module.exports = function () {
+  // ...
+}
+
+// AMD -- 使用 require.js 才能在浏览器运行
+define(function (require) {
+  // 通过相对路径获得依赖模块
+  const bar = require('./bar')
+  // 模块产出
+  return function () {
+    // ...
+  }
+})
+
+// es6 module
+// 通过相对路径获得依赖模块
+import bar = from './bar'
+// 模块产出
+export default function() {
+  // ...
+}
+```
+
+### 创建组件库模块入口文件
+webpack 支持 package.json 中的 module 字段，这样就可以启用 tree shake 机制。

src/components/AutoComplete/index.tsx

@@ -0,0 +1,3 @@
+import AutoComplete from './autoComplete'
+
+export default AutoComplete

src/components/Button/index.tsx

@@ -0,0 +1,2 @@
+import Button from './button'
+export default Button

src/components/Icon/index.tsx

@@ -0,0 +1,2 @@
+import Icon from './icon'
+export default Icon

src/components/Input/index.tsx

@@ -0,0 +1,3 @@
+import Input from './input'
+
+export default Input

src/components/Menu/index.tsx

@@ -0,0 +1,16 @@
+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>,
+  SubItem: FC<SubMenuProps>
+}
+
+const TransMenu = Menu as IMenuComponent
+
+TransMenu.Item = MenuItem
+TransMenu.SubItem = SubMenu
+
+export default TransMenu

src/components/Progress/index.tsx

@@ -0,0 +1,2 @@
+import Progress from './progress'
+export default Progress

src/components/Transition/index.tsx

@@ -0,0 +1,2 @@
+import Transition from './transition'
+export default Transition

src/components/Upload/index.tsx

@@ -0,0 +1,3 @@
+import Upload from './upload'
+
+export default Upload

src/index.tsx

@@ -1,17 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './styles/index.scss';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+library.add(fas)
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+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'