testui888 v1.0.2

testUI

用于周三演示的测试组件库 现在有一个需求，建立一个自己的项目的组件库。目标就是能够把我们项目中的组件发布到npm上，供大家使用。 于是，我研究了下一个npm包的发布流程。

下面我为大家讲一下我如何从0开始发布一个npm组件。

#1.搭建一个react工程 #1.1 前期准备 1. yarn yarn 官网:https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable 2. webpack4 3. webapack-dev-server 3 4. typeScripe 3

#1.2 开始（大概流程） 1. 创建目录和远程仓库 2. npm初始化 3. 新建lib/index.tsx 4. 新建 webpack.common.js(默认) 1. 配置entry :文件的入口 2. 配置output :文件的出口 3. 配置 module.rules 1. jsx 2. tsx 3. scss 4. 配置plugins 5. 配置webpack-dev-server 与 webpack.config.dev.js(开发环境) 6. 创建index.html 7. 配置webpack.confog.prod.js(生产环境) 8. 创建examples预览与webpack.config.docs.js 9. 引入测试 10. 引入CI持续集成 11. 配置tsconfig.json和tslint.json 12. 配置scripts 1. yarn start 2. yarn build #1.3 实际操作 1. 登录github账号，创建远程仓库 2. git clone git@github.com:xingxiaodong1994/testUI.git(你的远程仓库地址到本地) 3. 使用webstorm进入项目 4. npm init -y(在项目里初始化生成一个package.json文件) 5. 提交一版代码到github仓库

 git add .
 git commit -m "first commit 创建package.json"
 git push 

6. 安装webpack 进入wabpack官网，进入get start 跟着操作 yarn add webpack webpack-cli --dev 此时package.json 文件中多了 "devDependencies": { "webpack": "^4.43.0", "webpack-cli": "^3.3.11" }（如果想要和我一样安装的时候可以加上版本号）
7. 然后新建lib/index.tsx 写入一句话例如console.log('你好')
8. 此时你发现如果想要打印这句话，我们需要使用webpack来编译这个index.tsx文件。所以我们需要创建一个webpack.config.js 文件来配置webpack.
9. 具体内容请看文件 里面有entry选项配置入口文件，然后安装一些loader来使webpack识别tsx,svg，scss这些后缀的文件。webpack转义完成，我们需要配置output使webpack知道把编译好的文件输出到哪个路径。 我配置的输出到当前的dist目录路径下。但是这个路径要写成绝对路径，所以我们需要引入node.js的path模块。获取当前文件的路径，然后后面加上第dist目录，就是绝对路径。 配置文件格式为umd 疑问： library: 'safkljasge'的作用 umd这里需要
10. yarn add awesome-typescript-loader --dev
11. 安装ts 配置tsconfig.json tslint.json两个文件(这里抄别人的，自己不清楚，有大神的话可以自己配置)
12. yarn add typescript --dev
13. 运行npx webpack 发现需要配置mode，返回webpackconfig.js 配置成mode: "development".