调试 React-Admin 源码，看清框架的本质

最新推荐文章于 2024-08-22 09:05:58 发布

weixin_33885676

最新推荐文章于 2024-08-22 09:05:58 发布

阅读量513

点赞数

文章标签： javascript webpack git ViewUI

原文链接：https://juejin.im/post/5b93ad69f265da0abf7cc7c0

版权

Github，文章同步到这里。

无论如何，要想彻底用好一个框架，除了看文档，最重要的还是要看它的源码。

这里我记录下我对它的一个调试过程：

拉取仓库并安装

git clone https://github.com/marmelab/react-admin.git

yarn
复制代码

通过探索，发现 example 下 simple 项目就是专门用来调试用的，我们直接进入：

cd examples/simple

yarn start
复制代码

额，发现报错了：

React-Admin 这个框架，基本每天都更新，所以有报错是很正常的。

在这里，我们首先升级下这个项目到 babel7（因为报错更清晰，方便解决错误）：

npx babel-upgrade --write --install
复制代码

再次启动：

yarn start
复制代码

还是报错：

但错误很清晰，一眼就发现 @babel/preset-env 没有安装。我们安装并启动：

yarn add @babel/preset-env -D

yarn start
复制代码

继续报错，继续根据错误提示，安装包并把它添加到 .babelrc，然后启动：

yarn add @babel/plugin-proposal-export-default-from -D

yarn start
复制代码

额，这里还是报上面的错……我这里直接移动 .babelrc 配置到 webpack.config.js 的 babel-loader 的 options 选项中：

这下没有报之前的错了，但报了另外一个错了，我们根据提示解决一下：

yarn add @babel/plugin-proposal-export-namespace-from -D

yarn start
复制代码

添加这个插件到 babel-loader 中：

...
use: { 
    loader: 'babel-loader',
    options: {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
          ],
          "plugins": [
            "@babel/plugin-proposal-export-default-from",
            "@babel/plugin-proposal-class-properties",
            "@babel/plugin-proposal-object-rest-spread",
            "@babel/plugin-proposal-export-namespace-from"
          ]
    }
}
...
复制代码