webpack搭建react+ts+eslint项目

  • Z时代
  • 2024-01-10
  • 分类：综合

react

【初始化项目】

mkdir react_ts_eslint
cd react_ts_eslint
npm init

【生成ts配置文件】

tsc --init

【安装相关依赖】

npm install typescript webpack webpack-cli webpack-dev-server ts-loader cross-env webpack-merge clean-webpack-plugin html-webpack-plugin -D
npm install react @types/react react-dom @types/react-dom -D
npm install redux react-redux @types/react-redux redux-logger redux-promise redux-thunk @types/redux-logger @types/redux-promise -D
npm install react-router-dom @types/react-router-dom connected-react-router antd -D
npm install eslint @typescript-eslit/eslint-plugin @typescript-eslit/parser -D
npm install @types/jest ts-jest -D

【编写 /config/webpack.base.config.js】

/*
 * @Description: 
 * @Date: 2020-12-11 15:34:09
 * @Author: Jsmond2016 <jsmond2016@gmail.com>
 * @Copyright: Copyright (c) 2020, Jsmond2016
 */
// 清理产出目录的插件
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//  产出 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
  entry: './src/index.tsx',
  output: {
    // 输出目录
    path: path.resolve(__dirname, '../dist'),
    filename: 'main.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  devServer: {
    contentBase: '../dist',

      inline:true,

      host:'127.0.0.1',

      port:8080


  },
  module: {
    rules: [
      {
        test: /\.(j|t)sx?/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['./dist']
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

【编写 webpack.dev.config.js】

const { smart } = require('webpack-merge')
const base = require('./webpack.base.config')
module.exports = smart(base, {
  mode: 'development',
  devtool: 'inline-soruce-map'
})

【编写 webpack.prod.config.js】

const { smart } = require('webpack-merge')
const base = require('./webpack.base.config')
module.exports = smart(base, {
  mode: 'production',
})

【新建 src/index.html】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react-ts</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

【新建 src/index.tsx】

console.log('hello')

【配置 package.json 中的 dev, build 命令】

{
  "name": "react-typeScript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.config.js",
    "eslint": "eslint src --ext .js,.ts,.tsx",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^24.9.1",
    "@types/react-redux": "^7.1.7",
    "@types/react-router-dom": "^5.1.3",
    "@types/redux-logger": "^3.0.7",
    "@types/redux-promise": "^0.5.28",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.0",
    "css-loader": "^3.4.2",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^25.1.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0",
    "style-loader": "^1.1.3",
    "ts-jest": "^25.0.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "antd": "^3.26.7",
    "connected-react-router": "^6.6.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2"
  }
}

【启动项目】

npm run dev  /*webpack.dev.config.js文件的单词一定要严格书写正确*/

【如果报错】

/**可能会报错：smart is not a function*/
这是因为webpack-merge版本不兼容，需要制定版本：npm install webpack-merge@4.2.1 -D
/**如果出现报错：Error: Cannot find module 'webpack-cli/bin/config-yargs,这个也是版本不兼容问题，需要指定一下版本号*/
终端运行命令：npm install webpack-cli@3.3 -D
安装成功后运行命令：npm run dev

【运行打包命令报错】

/**打包时出现报错，并提示你安装webpack-cli,然后一直安装不上，这时，你需要全局安装*/
npm install webpack -g

【配置eslint】

{
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint/eslint-plugin"
    ],
    "extends": [
        /** 使用推荐配置 */
        "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
        /** 配置规则 */
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/no-var-requires": "off"
    }
}
/**记得在package.json新增eslint命令："eslint": "eslint src --ext .js,.ts,.tsx",*/

【单元测试：安装 jest 测试工具】

npm install @types/jest ts-jest -D
/**另外还需要全局安装jest-cli*/
npm install jest-cli -g

【新建 jest.config.js 配置】

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node'
}

【编写测试文件】

// src/calc.tsx
function sum (a: number, b: number) {
  return a + b
}
function minus (a: number, b: number) {
  return a - b
}
module.exports = {
  sum,
  minus
}
// src/calc.test.jsx
let calc = require('./calc')
describe('测试calc', () => {
  test('1+1', () => {
    expect(calc.sum(1,1)).toBe(2)
  })
  test('111', () => {
    expect(calc.minus(1,1)).toBe(0)
  })
})

【配置 package.json 中 测试命令】

运行测试命令： npm run test

【6-支持 React，编写 src/index.tsx代码】

import React from 'react';
import ReactDom from 'react-dom'
const Index = () => {
  return (
    <div>hello, world</div>
  )
}
ReactDom.render(<Index />, document.getElementById("root"))

【这时可能会标红语法问题，需要配置 tsconfig.json】

{
  "compilerOptions": {
      /** ... 新加这个 */
    "jsx": "preserve", /** 'preserve' | 'react-native' | 'react' */
     /** 'preserve' 表示保留 jsx 语法 和 tsx 后缀  */
     /** 'react-native' 表示 保留 jsx 语法但会把后缀改为 js  */
     /**  'react' 表示不保留 jsx 语法，直接编译成 es5  */
  }
}

【这时执行npm run dev命令，控制台可能会报错】

这是因为，项目还没添加babel转换器，浏览器无法识别jsx和es6语法

 【解决方案】

首先需要安装最新的：npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
然后在根目录创建.babelrc，并配置成：
{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ]
}
最后需要安装：npm install @babel/preset-react  @babel/plugin-syntax-jsx @babel/plugin-proposal-decorators -D
并且在webpack.base.config.js中的module下的rules添加对象：
{
                test: /\.(js|jsx|tsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx以及tsx文件（必须）
                use: {
                    loader: 'babel-loader',
                    options: {
                      presets: [
                        '@babel/preset-react',
                      ],
                      plugins: [
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-proposal-optional-chaining"],
                        ["@babel/plugin-syntax-jsx"],
                      ]
                    }
                  },//loader的名称（必须）
                exclude: /node_modules/   //屏蔽不需要处理的文件（文件夹）（可选）
            }

此时再运行启动命令：就可以看到项目可以启动了

以上是 webpack搭建react+ts+eslint项目 的全部内容， 来源链接： utcz.com/z/381713.html

回到顶部