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... (配置源碼)