React项目搭建webpackTS

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

创建目录与远程仓库
npm 初始化 (npm init)
新建 lib/index.tsx
新建 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 进行测试

安装:
yarn add –dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer
配置.babelrc(创建这个文件)
{
```
"presets": ["react-app"]
```
}
package.json 里面配置测试命令
“test”: “cross-env NODE_ENV=test jest –config=jest.config.js –runInBand”,

配置 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 啦

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

React项目搭建webpackTS

如何快速学会项目搭建

步骤

配置测试

总结