React项目搭建webpack+TS

时间 2020-07-06

标签 react 项目搭建 webpack+ts webpack 栏目 React 繁體版

原文原文链接

如何快速学会项目搭建

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

步骤

建立目录与远程仓库
npm 初始化 (npm init)
新建 lib/index.tsx
新建 webpack.config.jshtml
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.jsnode

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

9.配置package.jsonreact

"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 --devwebpack

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

12.运行后发现仍是报错
git

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

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

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

15.webpack配置,减少咱们打包后的代码体积github

// 告诉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文件改变web

"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",
typescript

配置测试

使用 react jest进行测试npm

安装:
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... (配置源码)