React项目搭建webpack+TS

如何快速学会项目搭建

答: 别想了,想啥呢?
只能是遇到问题去搜相关的 issues、文档和讨论（英文）。

步骤

1. 创建目录与远程仓库
2. npm 初始化 (npm init)
3. 新建 lib/index.tsx

4. 新建 webpack.config.js

   1. 配置 entry
   2. 配置 output
   3. 配置 module.rules
   4. jsx
   5. tsx
   6. scss
   7. 配置 plugins

const path = require('path')
module.exports = {
    mode: 'production',
    // 程序的入口在哪里
    entry: {
        index: './lib/index.tsx'
    },
    // 配置出口
    output: {
        // 出口路径
        path: path.resolve(__dirname, 'dist'),
        // 库的名字FUI
        library: 'FUI',
        // 库的格式
        // umd兼容了三种定义方式,commonJS define script
        // 但是并没有多NB,只是做了if else
        libraryTarget: 'umd',
    },
    // 编译tsx
    module: {
        rules: [{
            test: /\.tsx?$/,
            // 如果用了ts文件,使用下面loader翻译成js
            loader: 'awesome-typescript-loader'
        }]
    }
}

5.配置 tsconfig.json 和 tslint.json
6.配置 webpack-dev-server 与 webpack.config.dev.js配置 webpack-dev-server 与 webpack.config.dev.js
7.创建 index.html
8.配置 webpack.config.prod.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 前面的配置不变
    ...,
    // 自动找到index.html文件并显示它
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
}

9.配置package.json

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

10.安装react react-dom运行之后报错

11.安装@types/react @types/react-dom
yarn add @types/react --dev
yarn add @types/react-dom --dev

yarn.lock这个文件是对你安装东西的版本进行锁,比如你安装的react版本是16.8.4,锁的版本可能就是16.8.5,^这个箭头的意思是,可以高于^后面的版本

12.运行后发现还是报错

webpack的配置有问题总是说找不见对应文件,这时候配置
// 支持多种文件
resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
},

13.不会报错了,但是会处警告,警告也要消除掉

14.webpack配置里面更改如下,警告取消(同时index.js会变大1.2M)

15.webpack配置,减小我们打包后的代码体积

// 告诉webpack下面的库是外部的库
externals: {
    react: {
        // 对应不同的打包工具
        commonjs: 'react',
        commonjs2: 'react',
        amd: 'react',
        root: 'React',
    },
    'react-dom': {
        // 对应不同的打包工具
        commonjs: 'react-dom',
        commonjs2: 'react-dom',
        amd: 'react-dom',
        root: 'ReactDOM',
    },
}

16.为了满足开发和生产的模式,将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"
  },

17.配置index.d.ts到dist目录下

在tsconfig.json文件中加入"outDir": "dist",

配置测试

---

使用 react jest进行测试

1. 安装:
   yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

2. 配置.babelrc(创建这个文件)
   {

   "presets": [
       "react-app"
   ]

   }

3. package.json里面配置测试命令
   "test": "cross-env NODE_ENV=test jest --config=jest.config.js --runInBand",

4. 配置jest.config.js
   // https://jestjs.io/docs/en/con...
   module.exports = {

   verbose: true,
   clearMocks: false,
   collectCoverage: false,
   reporters: ["default"],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   moduleDirectories: ['node_modules'],
   globals: {
       'ts-jest': {
           tsConfig: 'tsconfig.test.json',
       },
   },
   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",
   },
   testMatch: ['<rootDir>/**/__tests__/**/*.unit.(js|jsx|ts|tsx)'],
   transform: {
       "^.+unit\\.(js|jsx)$": "babel-jest",
       '^.+\\.(ts|tsx)$': 'ts-jest',
   },
   setupFilesAfterEnv: ["<rootDir>test/setupTests.js"]

   }

5.安装支持ts的jest

    yarn add --dev ts-jest

6.执行yarn test报错(这个报错是说你没有写测试用例 -- 已经成功了)

7.安装连个插件

yarn add @types/jest --dev
yarn add @types/react-test-renderer --dev

8.在lib文件夹下面创建__tests__文件夹

9.神奇的import BUG 在不写* as 的时候会报错

更改配置(上面注释掉的已经被弃用了),改了之后就不需要写* as啦

总结

---

1. 在配置的过程中会遇到许多问题,报错和警告是绝对不许有得
2. 遇到问题,首先想办法解决,不要放弃,坚持解决了问题才能提升
3. https://github.com/sunkuangdo... (配置源码)