如何快速学会项目搭建

答: 别想了,想啥呢?
只能是遇到问题去搜相关的 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 --devyarn add @types/react-test-renderer --dev

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

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

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

总结

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