devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端环境搭建react18+typescript+webpack5项目 - 项目初始化_react 初始化 typescript

作者：我家自动化 | 2024-04-13 17:58:41

赞

踩

react 初始化 typescript

1、项目的创建

这里使用pnpm 。pnpm 、 npm 和 yarn 都是 Node.js 和 JavaScript 项目的包管理器。每种都有自己的优点和缺点，

选择使用哪一种最终取决于你的具体需求和偏好

1. 更快的安装和更新时间

2. 更少的磁盘空间使用

3. 更好地支持 monorepos

4. 更好地支持对等依赖

5. 更清晰的依赖树

  1. # 我的 pnpm 版本
  2. pnpm -v
  3. 7.27.1
  4. # 初始化package.json文件
  5. pnpm init

会在根目录生成一个 package.json 文件：

  1. {
  2. "name": "fe",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1"
  8. },
  9. "keywords": [],
  10. "author": "",
  11. "license": "ISC"
  12. }

2 、基本项目结构

在根目录新建基本的项目结构：
index.html 内容： 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>webpack5-react-ts</title>
  8. </head>
  9. <body>
  10. <!-- 容器节点 -->
  11. <div id="root"></div>
  12. </body>
  13. </html>

3、 引入react

安装依赖：

4、 引入typescript

        
初始化 tsconfig.json ：

5、 webpack配置

安装依赖：

pnpm i webpack webpack-cli -D

5.1 webpack.base.ts

另外因为我们在 App.tsx 中引入了 css 文件，所以还需要安装相关的 loader ： 
  1. import { Configuration } from "webpack";
  2. import HtmlWebpackPlugin from "html-webpack-plugin";
  3. const path = require("path");
  4. const baseConfig: Configuration = {
  5. entry: path.join(__dirname, "../src/index.tsx"), // 入口文件
  6. // 打包出口文件
  7. output: {
  8. filename: "static/js/[name].js", // 每个输出js的名称
  9. path: path.join(__dirname, "../dist"), // 打包结果输出路径
  10. clean: true, // webpack4需要配置clean-webpack-plugin来删除dist文件,webpack5
  11. 内置了
  12. publicPath: "/", // 打包后文件的公共前缀路径
  13. },
  14. // loader 配置
  15. module: {
  16. rules: [
  17. {
  18. test: /.(ts|tsx)$/, // 匹配.ts, tsx文件
  19. use: {
  20. loader: "babel-loader",
  21. options: {
  22. // 预设执行顺序由右往左,所以先处理ts,再处理tsx
  23. presets: [
  24. [
  25. "@babel/preset-env",
  26. {
  27. // 设置兼容目标浏览器版本,也可以在根目录配置.browserslistrc文
  28. 件,babel-loader会自动寻找上面配置好的文件.browserslistrc
  29. targets: { browsers: ["> 1%", "last 2 versions", "not ie
  30. <= 8"] },
  31. useBuiltIns: "usage", // 根据配置的浏览器兼容,以及代码中使用到
  32. 的api进行引入polyfill按需添加
  33. corejs: 3, // 配置使用core-js使用的版本
  34. loose: true,
  35. },
  36. ],
  37. // 如果您使用的是 Babel 和 React 17，您可能需要将 "runtime":
  38. "automatic" 添加到配置中。
  39. // 否则可能会出现错误：Uncaught ReferenceError: React is not
  40. defined
  41. ["@babel/preset-react", { runtime: "automatic" }],
  42. "@babel/preset-typescript",
  43. ],
  44. },
  45. },
  46. },
  47. {
  48. test: /.css$/, //匹配 css 文件
  49. use: ["style-loader", "css-loader"],
  50. },
  51. ],
  52. },
  53. resolve: {
  54. extensions: [".tsx", ".ts", ".jsx", ".js"],
  55. },
  56. // plugins
  57. plugins: [
  58. new HtmlWebpackPlugin({
  59. // 复制 'index.html' 文件，并自动引入打包输出的所有资源（js/css）
  60. template: path.join(__dirname, "../public/index.html"),
  61. // 压缩html资源
  62. minify: {
  63. collapseWhitespace: true, //去空格
  64. removeComments: true, // 去注释
  65. },
  66. }),
  67. ],
  68. };
  69. export default baseConfig
因为 webpack.base.ts 文件承载了基本的配置，随着 webpack 做的事情越来越多，会逐渐变得很庞大，我们可以将其中的 babel-loader 相关的配置抽离出来进行管理。在根目录新建babel.config.js ： 
  1. module.exports = {
  2. // 执行顺序由右往左,所以先处理ts,再处理jsx,最后再试一下babel转换为低版本语法
  3. presets: [
  4. [
  5. "@babel/preset-env",
  6. {
  7. // 设置兼容目标浏览器版本,这里可以不写,babel-loader会自动寻找上面配置好的文
  8. 件.browserslistrc
  9. // "targets": {
  10. // "chrome": 35,
  11. // "ie": 9
  12. // },
  13. targets: { browsers: ["> 1%", "last 2 versions", "not ie <= 8"] },
  14. useBuiltIns: "usage", // 根据配置的浏览器兼容,以及代码中使用到的api进行引入
  15. polyfill按需添加
  16. corejs: 3, // 配置使用core-js使用的版本
  17. loose: true,
  18. },
  19. ],
  20. // 如果您使用的是 Babel 和 React 17，您可能需要将 "runtime": "automatic" 添加到
  21. 配置中。
  22. // 否则可能会出现错误：Uncaught ReferenceError: React is not defined
  23. ["@babel/preset-react", { runtime: "automatic" }],
  24. "@babel/preset-typescript",
  25. ],
  26. };
然后在 webpack.base.ts 文件中，就可以将 babel-loader 配置简化成： 
  1. module: {
  2. rules: [
  3. {
  4. test: /.(ts|tsx)$/, // 匹配.ts, tsx文件
  5. use: "babel-loader"
  6. },
  7. // ...
  8. ],
  9. },

5.2 webpack.dev.ts

安装依赖：pnpm i webpack-dev-server webpack-merge -D

接着，配置开发环境配置： webpack.dev.ts 
  1. import path from "path";
  2. import { merge } from "webpack-merge";
  3. import { Configuration as WebpackConfiguration } from "webpack";
  4. import { Configuration as WebpackDevServerConfiguration } from "webpack-devserver";
  5. import baseConfig from "./webpack.base";
  6. interface Configuration extends WebpackConfiguration {
  7. devServer?: WebpackDevServerConfiguration;
  8. }
  9. const host = "127.0.0.1";
  10. const port = "8082";
  11. // 合并公共配置,并添加开发环境配置
  12. const devConfig: Configuration = merge(baseConfig, {
  13. mode: "development", // 开发模式,打包更加快速,省了代码优化步骤
  14. devtool: "eval-cheap-module-source-map",
  15. devServer: {
  16. host,
  17. port,
  18. open: true, // 是否自动打开
  19. compress: false, // gzip压缩,开发环境不开启，提升热更新速度
  20. hot: true, // 开启热更新
  21. historyApiFallback: true, // 解决history路由404问题
  22. setupExitSignals: true, // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出
  23. 进程。
  24. static: {
  25. directory: path.join(__dirname, "../public"), // 托管静态资源public文件夹
  26. },
  27. headers: { "Access-Control-Allow-Origin": "*" }, // HTTP响应头设置，允许任何
  28. 来源进行跨域请求
  29. },
  30. });
  31. export default devConfig;

然后在package.json中添加启动脚本：

  1. "scripts": {
  2. "dev": "webpack serve -c build/webpack.dev.ts"
  3. },
只需要在 tsconfig.json 中加入一行 "jsx": "react-jsx" 即可： 
  1. {
  2. "compilerOptions": {
  3. "target": "es2016",
  4. "esModuleInterop": true,
  5. "module": "commonjs",
  6. "forceConsistentCasingInFileNames": true,
  7. "strict": true,
  8. "skipLibCheck": true,
  9. "jsx": "react-jsx" // 这里改成react-jsx，就不需要在tsx文件中手动引入React了
  10. },
  11. "include": ["./src"]
  12. }
运行 pnpm run dev 脚本启动项目 ，就可以看到页面跑出来了！

5.3 webpack.prod.ts

配置 webpack.prod.ts ：

  1. import { Configuration } from "webpack";
  2. import { merge } from "webpack-merge";
  3. import baseConfig from "./webpack.base";
  4. const prodConfig: Configuration = merge(baseConfig, {
  5. mode: "production", // 生产模式,会开启tree-shaking和压缩代码,以及其他优化
  6. });
  7. export default prodConfig;
在 package.json 中添加： 
  1. "scripts": {
  2. // ...
  3. "build": "webpack -c build/webpack.prod.ts"
  4. },
运行 pnpm run build 

5.4 copy 静态资源

安装依赖：pnpm i copy - webpack - plugin - D
修改 webpack.base.ts ： 
  1. const baseConfig: Configuration = {
  2. // ...
  3. plugins: [
  4. new HtmlWebpackPlugin({
  5. title: "webpack5-react-ts",
  6. filename: "index.html",
  7. // 复制 'index.html' 文件，并自动引入打包输出的所有资源（js/css）
  8. template: path.join(__dirname, "../public/index.html"),
  9. inject: true, // 自动注入静态资源
  10. hash: true,
  11. cache: false,
  12. // 压缩html资源
  13. minify: {
  14. removeAttributeQuotes: true,
  15. collapseWhitespace: true, //去空格
  16. removeComments: true, // 去注释
  17. minifyJS: true, // 在脚本元素和事件属性中缩小JavaScript(使用UglifyJS)
  18. minifyCSS: true, // 缩小CSS样式元素和样式属性
  19. }
  20. })
  21. ],
  22. };
  23. export default baseConfig;
开发环境已经在 devServer 中配置了 static 托管了 public 文件夹，在开发环境使用绝对路径可以访问
到 public 下的文件，但打包构建时不做处理会访问不到，所以现在需要在打包配置文件
webpack.prod.ts 中新增 copy 插件配置。 
  1. import path from "path";
  2. import { Configuration } from "webpack";
  3. import { merge } from "webpack-merge";
  4. import CopyPlugin from "copy-webpack-plugin";
  5. import baseConfig from "./webpack.base";
  6. const prodConfig: Configuration = merge(baseConfig, {
  7. mode: "production", // 生产模式,会开启tree-shaking和压缩代码,以及其他优化
  8. plugins: [
  9. new CopyPlugin({
  10. patterns: [
  11. {
  12. from: path.resolve(__dirname, "../public"), // 复制public下文件
  13. to: path.resolve(__dirname, "../dist"), // 复制到dist目录中
  14. filter: (source) => !source.includes("index.html"), // 忽略
  15. index.html
  16. },
  17. ],
  18. }),
  19. ],
  20. });
  21. export default prodConfig;

6、文件别名

先在 webpack.base.ts 中配置： 
  1. resolve: {
  2. extensions: [".ts", ".tsx", ".js", ".jsx", ".less", ".css"],
  3. // 别名需要配置两个地方，这里和 tsconfig.json
  4. alias: {
  5. "@": path.join(__dirname, "../src")
  6. },
  7. },
然后还需要在 tsconfig.json 中配置： 
  1. {
  2. "compilerOptions": {
  3. // ...
  4. "baseUrl": ".",
  5. "paths": {
  6. "@/*": ["src/*"]
  7. },
  8. },
  9. }
然后就可以在项目中使用了 ~ 
  1. import '@/App.css'
  2. function App() {
  3. return <h2>webpack5-react-ts</h2>
  4. }
  5. export default App

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/417758
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号