dva调试 - 技术栈

仅个人记录

以前研究过的好多东西，因为没有记录下来，现在都忘了好多 emm~~~~ ,所以记录下来吧。

啊哦

只是看之前的项目使用umi创建的，使用了dva。心血来潮寻思调试一下。总觉得看代码，比看别人科普的文章更清晰一些。本来寻思调试流程一会就搞定了，结果弄了一周，才好~~~ 。哎，在放弃和麻木之中选择了坚持。。。

试错

试错过程就不记录了，太恶心。。。如果有哪位大佬看到我的文章，如果恰巧有过相关经验，可以传授一下，dva的开发者是咋调试的呢、、、

dva打包sourcemap

下崽dva源码
更改build代码。

scripts/build.js

js 复制代码

  return babel.transform(content, { ...config, filename: path })[
    sourcemap ? "map" : "code"
  ];

js 复制代码

function buildPkg(pkg, sourcemap) {
  rimraf.sync(join(cwd, "packages", pkg, lib));
  vfs
    .src(`./packages/${pkg}/src/**/*.js`)
    .pipe(
      through.obj((f, enc, cb) => {
        let content = transform({
          content: f.contents,
          path: f.path,
          sourcemap: sourcemap
        });

        if (!sourcemap) {
          const path = basename(f.path);
          content += `\n//# sourceMappingURL=${path}.map`;
        }

        f.contents = Buffer.from(sourcemap ? JSON.stringify(content) : content);
        f.path = sourcemap ? f.path + ".map" : f.path;
        cb(null, f);
      })
    )
    .pipe(vfs.dest(`./packages/${pkg}/${lib}/`));
}

js 复制代码

  buildPkg(pkg);
  buildPkg(pkg, true);

更改全局的package.json

json 复制代码

  "resolutions": {
    "dva-core": "1.4.0"
  }

更改dva的package.json

json 复制代码

     "@types/isomorphic-fetch": "^0.0.34",
     "@types/react-router-dom": "^4.2.7",
     "@types/react-router-redux": "^5.0.13",
-    "dva-core": "^1.4.0",
+    "dva-core": "file:/Users/XXXX/Downloads/dva-dva-2.4.1/packages/dva-core",
     "global": "^4.3.2",
     "history": "^4.6.3",
     "invariant": "^2.2.2",

执行build

创建项目

项目的webpack配置

js 复制代码

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.jsx", // 入口文件
  output: {
    path: path.resolve(__dirname, "dist"), // 输出目录
    filename: "bundle.js", // 输出文件
    publicPath: "/", // 确保静态资源的路径正确
  },
  mode: "development", // 开发模式
  devtool: "cheap-module-source-map", // 调试工具
  devServer: {
    port: 3000,
    open: true, // 自动打开浏览器
    hot: true, // 开启热更新
  },
  module: {
    rules: [
      {
        test: /node_modules/,
        loader: "source-map-loader",
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"], // 使用 babel 转换 JS 和 React JSX
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // 处理 CSS 文件
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html", // HTML 模板文件
    }),
  ],
};

JSON 复制代码

{
  "name": "dva-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config webpack.config.js --mode development",
    "build": "webpack --config webpack.config.js --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.26.10",
    "@babel/preset-env": "^7.26.9",
    "@babel/preset-react": "^7.26.3",
    "babel-loader": "^10.0.0",
    "css-loader": "^7.1.2",
    "html-webpack-plugin": "^5.6.3",
    "style-loader": "^4.0.0",
    "webpack": "^5.99.5",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.1"
  },
  "dependencies": {
    "dva": "file:/Users/XXXX/Downloads/dva-dva-2.4.1/packages/dva",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-redux": "7",
    "react-router-dom": "^6",
    "redux": "^5.0.1",
    "source-map-loader": "^5.0.0"
  }
}

src/index.tsx

jsx 复制代码

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import dva from 'dva';
// debugger;


// 1. 创建 dva 应用
const app = dva();

// 2. 注册 model
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add(state) {
      return state + 1;
    },
    minus(state) {
      return state - 1;
    },
  },
});

// 3. 配置路由
app.router(({ history }) => {
  return (
    <Provider store={app._store}>
      <div>
        <h1>DVA React</h1>
        <button onClick={() => app._store.dispatch({ type: 'count/add' })}>+</button>
        <button onClick={() => app._store.dispatch({ type: 'count/minus' })}>-</button>
        <p>Current Count: {app._store.getState().count}</p>
      </div>
    </Provider>
  );
});

// // 4. 启动 dva 应用
app.start('#root');

结束

写出来这么简单，我为什么遇见了辣么多坑~~~

补充记录

使用在dva中用 "dva-core":"workspace:*"，不可以，这时候工作区应该是变成了测试项目。 link没有尝试，应该也可以。