Ec-comps NPM | npm.io

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

项目创建过程

参考文档

初始化项目
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

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