"build-storybook": "build-storybook -c .storybook -o .out"

项目创建过程

参考文档

1. 初始化项目

1. mkdir story
2. cd story && npm init -y

2. 安装依赖

1. 添加React babel依赖包

npm i --save react react-dom    
npm i --save-dev @babel/core babel-loader  

2. 创建 tsconfig.json 文件

`tsc --init`

tsconfig.json文件

{ "compilerOptions": { "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. / "module": "commonjs", / Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. / "lib": ["dom", "es2015", "es2015.promise"], / Specify library files to be included in the compilation. / "jsx": "react", / Specify JSX code generation: 'preserve', 'react-native', or 'react'. / "sourceMap": true, / Generates corresponding '.map' file. / "strict": true, / Enable all strict type-checking options. / "noImplicitAny": true, / Raise error on expressions and declarations with an implied 'any' type. / "baseUrl": "src", / Base directory to resolve non-absolute module names. / "paths": { "@/": ["./"], }, / A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. / "esModuleInterop": true / Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. / }, "include": [ "./src//" ]

### 3. 安装 react 相关依赖包 和相应的ts声明
`npm i -D react react-dom`
`npm i -D #types/react #types/react-dom`

### 4. webpack 以及一些必要的 loader
`npm i -D webpack webpack-cli `
`npm i -D source-map-loader`
`npm i -D less less-loader css-loader style-loader`
// webpack 插件
`npm i -D html-webpack-plugin`
`npm i -D webpack-bundle-analyzer`

`npm i -D clean-webpack-plugin`

> webpack配置文件 webpack.config.js 
> 
> ```javascript
var fs = require('fs')
var path = require('path')
var webpack = require('webpack')
const { CheckerPlugin } = require('awesome-typescript-loader');
var ROOT = path.resolve(__dirname)
module.exports = {
entry: './src/index.tsx',
devtool: 'source-map',
output: {
path: ROOT + '/dist',
filename: '[name].bundle.js',
sourceMapFilename: '[name].bundle.map.js'
},
module: {
rules: [
  { test: /\.ts[x]?$/, loader: "awesome-typescript-loader" },
  { enforce: "pre", test: /\.ts[x]$/, loader: "source-map-loader" },
  {
    test: /\.less$/,
    include: ROOT + '/src',
    use: [
      {
        loader: 'style-loader'
      },
      {
        loader: 'css-loader'
      },
      {
        loader: 'less-loader'
      }
    ]
  },
  {
    test: /\.png/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 1024*20
        }
      }
    ]
  }
]
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json", ".png"],
alias: {
  '@': ROOT + '/src'
}
},
plugins: [
new CheckerPlugin(),
]
}

5. 添加storybook依赖包

npm i --save-dev 
@storybook/react
@storybook/addons
@storybook/addon-actions 
@storybook/addon-knobs 
@storybook/addon-links 
@storybook/addon-notes 
npm i -D @storybook/addon-info  // 此插件比较特殊，不需要提前注册，它可以显示story的源码，并针对props提供一些文档

storybook 具体使用请查看官方说明

6. 添加 antd 依赖包

npm i --save antd 
npm i --save-dev @storybook/preset-ant-design  //storybook-antd 预设置

.storybook/main.js addons数组中添加 '@storybook/preset-ant-design'

7. 添加 typeScript 依赖包

npm i --save-dev typescript tslint tslint-react ts-loader ts-node awesome-typescript-loader
npm i --save-dev @types/react @types/react-dom @types/jest @types/node @types/webpack @types/storybook__react  
fork-ts-checker-webpack-plugin
react-docgen-typescript-loader
@storybook/preset-typescript  //storybook-typescript 预设置

.storybook/main.js addons数组中添加 '@storybook/preset-typescript'

react+typeScript github样例项目

// 启动开发环境 "storybook": "start-storybook -p 9001 -c .storybook", // 打包成静态网站资源 "build-storybook": "build-storybook -c .storybook -o .out

发布到npm

发布流程

1. 首先注册你的npm帐号
2. 命令行执行npm login登录你的npm账号
3. 进入你项目目录下npm publish即可完成发布

回撤版本

如果你意外的发布错了包，使用npm unpublish +包名即可删除该包。

npm unpublish ec-comps

如果你想撤回指定版本，执行npm unpublish + 包名@版本号。

npm unpublish chat-react@1.0.0

Tips：npm为了保证包不会影响到使用者，发布的版本只能在24小时内进行撤回。

创建项目及打包参考

"webpack": "^4.41.6", "webpack-bundle-analyzer": "^3.6.0", "webpack-cli": "^3.3.11"

"typings": "lib/index.d.ts",

"unpkg": "dist/antd.min.js",

"files": [ "dist", "lib", "es" ], "license": "MIT", "main": "lib/index.js", "module": "es/index.js", "name": "antd",