临近校招，因无实习，还非科班，想给简历加分，故只能自己做项目，但类似后台管理系统、购物商城的都已经烂大街了，所以尝试一下能不能做点难度稍微高一点的ui组件库

环境配置

建立仓库

在github上建立fun ui仓库，注意现在github上默认的分支不是master了，我克隆到本地的后，练习上传到另一个地址时，发现不用master了，是main分支

在建立的时候勾选了，为仓库创建README文件和 .gitignore文件，
.gitignore文件，在里面写了的文件，不会被git工具进行更新，比如后续会将 dist文件下的所有文件都不进行推送，只在本地就行

初始环境配置

在终端输入

npm init -y

生成package.json

根目录下新建lib文件夹，lib文件夹下新建index.tsx

首先要说明的是，浏览器不支持Ts，所以要用webpack把Ts转换成Js

配置webpack

首先先下载webpack，进官网查看如何安装webpack

这里我们用yarn add，比npm命令稳定一些
webpack用4.29.6版本 webpack-cli用3.2.3
–save-dev的意思是开发者模式，这个依赖是给程序员用的，打包后不会放到包里

yarn add webpack@4.29.6 webpack-cli@3.2.3 --save-dev

在这里简单复习一下-dev
在npm命令里，- -save-dev是给程序员用的，即开发环境development，- -save是给用户用的，什么都不写，默认是- -save，
在yarn命令里，可以直接默认不写 - -save，写

yarn --dev

其次- -save可以简写为-S
–dev可以简写为-D

以下为配置文件，注释写的还是比较详细，
不过还得安装以下依赖

“webpack-dev-server”: “^3.11.2”
“typescript”: “^4.3.4”,
“awesome-typescript-loader”: “^5.2.1”,
“html-webpack-plugin”: “3.2.0”,

// webpack的配置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    
    // 配置mode环境。生产环境是production上线给用户用，会压缩代码，超过244k会警告，开发环境是development
    mode: 'development',
    // 入口文件,键名index就是外部要找的根目录下的文件名,默认找html后缀
    // 键值就是要转换的那个文件的地址，经过webpack的转换，写进index.html里面
    entry: {
    
        index: './lib/index.tsx'
    },
    // 支持的后缀，不然在import的时候，不写tsx就找不到tsx文件
    resolve:{
    
        extensions:['.ts','.tsx','.js','.jsx'],
    },
    // 输出目录，要用到绝对路径，所以在上方引入path模块
    output: {
    
        // 路径
        path: path.resolve(__dirname, 'dist/lib'),
        // 库的名字
        library: 'FunUI',
        // 库的目标格式 , 这个是跟cmd，amd类似的一种模块化
        libraryTarget: 'umd'
    },
    // 配置loader
    module: {
    
        rules: [
            {
    
                //  //表示正则， .要用转义\  ?表示x可有可无  $表示以这个结尾
                test: /\.tsx?$/,
                // loader有多种多样，这里用的是其中一个比较好的，一般都是直接输名字然后--dev安装
                loader: 'awesome-typescript-loader'
            }
        ]
    },
    // 配置plugin
    plugins: [
        // 用于生成html里面的script src标签，引入经过转换的ts文件
        new HtmlWebpackPlugin({
    
            title: 'FunUI - React',
            // 引入进index.html文件里
            template: 'index.html'
        })
    ],
    // 用于将react包排在外面，让其他开发者自己下载，不然这个太大了
    externals: {
    
        react: {
    
            // 对应的模块化标准，该怎么引用，比如require('xxx')，这个xxx就是下面的'react'
            commonjs: 'react',
            commonjs2: 'react',
            amd: 'react',
            root: 'React',
        },
        'react-dom': {
    
            commonjs: 'react-dom',
            commonjs2: 'react-dom',
            amd: 'react-dom',
            root: 'ReactDOM',
        },
    },
}

配置tsconfig.json和tslint.json

tsconfig.json接收typescript编译器的配置,例如允许 javascript文件,文件的位置等.
tslint.json是TSLint的配置,TSLint可以帮助您检测错误的编码实践或遵循编码风格,您可以配置其选项,如禁止未使用的变量,不记录到控制台等.此外,TSLint不仅仅是一个插件vscode,因此您团队中的某个人可以使用其首选项的编辑器并仍然使用TSLint.

网上搜索
tsconfig.json，删掉刚刚跟webpack相关的配置内容，以webpak为准，其他的以tsconfig为准

{
    
    "compilerOptions": {
    
        "declaration": true,
        "baseUrl": ".",
        "module": "esnext",
        "target": "es5",
        "lib": [
            "es6",
            "dom"
        ],
        "sourceMap": true,
        "jsx": "react",
        "moduleResolution": "node",
        "rootDir": ".",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "importHelpers": true,
        "strictNullChecks": true,
        // "suppressImplicitAnyIndexErrors": true,
        // https://github.com/Microsoft/TypeScript/issues/28762#issuecomment-443406607
        "allowSyntheticDefaultImports": true,
        "noUnusedLocals": true
    },
    "include": [],
    "exclude": [
        "node_modules",
        "build",
        "dist",
        "scripts",
        "acceptance-tests",
        "webpack",
        "jest",
        "src/setupTests.ts",
        "*.js"
    ]
}

tslint.json

{
    
    "extends": ["tslint:recommended", "tslint-react"],
    "rules": {
    
        "no-console": [false, "log", "error"],
        "jsx-no-multiline-js": false,
        "whitespace": false,
        "no-empty-interface": false,
        "space-before-function-paren": false,
        "no-namespace": false,
        "label-position": false,
        "quotemark": [true, "single", "jsx-double"],
        "member-access": false,
        "semicolon": [true, "always", "ignore-bound-class-methods"],
        "no-unused-expression": [true, "allow-fast-null-checks"],
        "member-ordering": false,
        "trailing-comma": false,
        "arrow-parens": false,
        "jsx-self-close": false,
        "max-line-length": false,
        "interface-name": false,
        "no-empty": false,
        "comment-format": false,
        "ordered-imports": false,
        "object-literal-sort-keys": false,
        "eofline": false,
        "jsx-no-lambda": false,
        "no-trailing-whitespace": false,
        "jsx-alignment": false,
        "jsx-wrap-multiline": false,
        "no-shadowed-variable": [
            false,
            {
    
                "class": true,
                "enum": true,
                "function": false,
                "interface": false,
                "namespace": true,
                "typeAlias": false,
                "typeParameter": false
            }
        ]
    },
    "linterOptions": {
    
        "exclude": [
            "config/**/*.js",
            "node_modules/**/*.ts",
            "coverage/lcov-report/*.js"
        ]
    }
}

配置package.json

通过刚才的配置，文件列表如下
yarn.lock是yarn的lock文件，就是字面意思，锁了yarn这些依赖的版本

因为安装了webpack-dev-server，所以可以使用npx webpack-dev-server命令运行，会编译目标ts成js到内存，并在80端口展示index.html，注意这个时候写的ts不会立马更新到dist/lib/index.js里面，

npx webpack-dev-server

npx命令，会首先在当前文件夹下找这个命令的包，没有就往外去找，如果每次都要写这么长就很麻烦
所以可以配置package.json

"scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build":"webpack"
  },

如此，只需要yarn start便可以运行，yarn build就可以打包

按照React

在index.tsx里写

import React from 'react'
import ReactDOM from 'react-dom'

直接安装就行

yarn add react react-dom

之后会报错

前两个是说声明了，但没用，后两个谷歌搜索后，了解到是ts用react还需要安装其他依赖
所以写到

import React from 'react'
import ReactDOM from 'react-dom'
console.log(React);
console.log(ReactDOM);

并安装依赖

yarn add @types/react --dev
yarn add @types/react-dom --dev

最后如下

info Direct dependencies
├─ react-dom@17.0.2
└─ react@17.0.2
info All dependencies
├─ js-tokens@4.0.0
├─ react-dom@17.0.2
├─ react@17.0.2
└─ scheduler@0.20.2

info Direct dependencies
└─ @types/react@17.0.11
info All dependencies
├─ @types/prop-types@15.7.3
├─ @types/react@17.0.11
├─ @types/scheduler@0.16.1
└─ csstype@3.0.8

info Direct dependencies
└─ @types/react-dom@17.0.8
info All dependencies
└─ @types/react-dom@17.0.8

在此强调，这是Ts与Js安装React不同的地方
需要注意的是，在安装的时候版本可能不一样，或许现在没有出现bug，但是可能后续会出现意外，
在package.json里可以看到@types/react与react不一致，另外两个也不一致

优化webpack配置

新建webpack.config.dev.js用于开发模式下的配置

webpack.config.prod.js用于生产模式下的配置

webpack.config.js，这个用于两者都需要的配置

然后在修改package.json

  "scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.prod.js"
  },

为了兼容windows系统，要再按照另一个依赖，并再配置package.json

yarn add cross-env --dev

  "scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js"
  },

处理index.d.ts

这个文件是ts用来指导以后的使用者（我是开发者）确定其中的变量等是什么类型的，毕竟是叫typescript，
然后需要配置package.json

main是给别人用的时候，别人引入的主文件入口index.js，不使用main属性的话我们可能需要这样写引用：require(“some-module/dist/app.js”)，如果我们在main属性中指定了dist/app.js的话，我们就可以直接引用依赖就可以了：require(“some-module”)

types就是index.d.ts，会自动自动区分后缀

  "name": "fun-ui",
  "version": "1.0.0",
  "description": "",
  "main": "dist/lib/index",
  "types": "dist/lib/index",

在tsconfig.json里添加

"outDir": "dist",

配置Jest测试框架

如何安装，看官网https://jestjs.io/zh-Hans/docs/tutorial-react

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

新建 .babelrc文件，里面是json格式

然后修改package.json的test命令行

  "scripts": {
    
    "test": "cross-env NODE_ENV=test jest --config=jest.config.js --runInBand",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js"
  },

新建jest.config.js文件，然后去复制别人的

module.exports = {
    
    verbose: true,
    clearMocks: false,
    collectCoverage: false,
    
    reporters: ["default"],
    
    moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
    moduleDirectories: ['node_modules', 'include'],
    moduleNameMapper: {
    
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/file-mock.js",
      "\\.(css|less|sass|scss)$": "<rootDir>/test/__mocks__/object-mock.js",
    },
    testMatch: ['<rootDir>/**/__tests__/**/*.unit.(js|jsx|ts|tsx)'],
    transform: {
    
      "^.+unit\\.(js|jsx)$": "babel-jest",
      '^.+\\.(ts|tsx)$': 'ts-jest',
    },
    setupFilesAfterEnv: ["<rootDir>test/setupTests.js"]
  }

按照依赖ts-jest

yarn add ts-jest --dev

建立一个test文件，开始测试，测试框架是否正常运行

yarn test

成功，下面测试正确的

解决bug

目前出现了一些问题，而且是一个连着一个
最开始是解决引入问题，现在必须要用 * as xxx 才可以，这样不好
要在tsconfig里加上

        // "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,

然后出现

Error: Final loader (./node_modules/awesome-typescript-loader/dist/entry.js) didn’t return a Buffer or String

查了谷歌、百度、github、StackOverflow等、都找遍了，并不能解决问题，
然后在github上看到awesome-typescript-loader看到这个依赖最后一次更新还是在18年，已经3年没更新了，我觉得应该是版本已经不适应新的ts和webpack了。
而且看到解决办法里面有人说换loader，所以我换成了ts-loader

yarn add --dev ts-loader

然后新的问题出现了
[typescript] ERROR TS18003: No inputs were found in config file ‘tsconfig.json’. Specified ‘include’ paths were ‘["./src/**/*"]’ and ‘exclude’ paths were ‘["./dist/"]’.
然后查到说是ts-loader版本太高不支持webpack，又减低到8.2

yarn add --dev ts-loader@8.2.0

结果还是不行，后来发现应该再配置tsconfig文件
在include栏加上目标文件

    // ts-loader会报错，要把include入口处定义一下，咱们要转译的就是lib下的所有ts文件
    "include": [
        "lib/**/*"
    ],

然后test 、 build 、 start三个命令都可以正常运行来，终于解决了

记得卸载awesome-typescript-loader

yarn remove awesome-typescript-loader