返回

脚手架下的前端构建从简

前端

从零配置Webpack 5 + React脚手架（二）

上回说到我们利用create-react-app生成了一个React项目，并且顺便演示了一下利用淘宝镜像源加速npm包的安装。这一次，我们就来看看这个脚手架下，我们的代码究竟是怎样编译运行的。

执行npm start看看能否给我们第一个div加上颜色呐。不出意外的话你的页面应该是什么都没有展示。浏览器中的console也应该是报了错与此同时运行npm start的终端也报了error。

来吧，让我们处理报错。

$ npm start

> my-app@0.1.0 start /Users/lunatic/Documents/my-app
> react-scripts start

sh: react-scripts: command not found

没错，create-react-app工具帮我们创建了项目后，在package.json的scripts字段下自动配置了很多的脚本命令。其中start就是让我们启动本地服务的命令。而这个命令实际上是通过react-scripts启动的。因为react-scripts是全局安装的，所以我们刚刚运行npm start时就报错了。

解决办法也非常简单，重新安装一下react-scripts工具即可。

$ npm i -g react-scripts

这里面的-g代表全局安装。安装完成后再运行npm start，你会发现项目已经跑起来了。

这时候浏览器页面上的div标签已经有了颜色，console中的报错也消失了。但是我们终端的npm start依然报错了。

别着急，这次的报错没那么严重了。错误信息大概是这样的：

Failed to compile.

./src/App.js
  Line 7:  Property 'text' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivProps>'.

webpack compiled with 1 error

我们来看一下第七行代码：

const App = () => {
  const text = "Hello React!";
  return <div text={text}/>;
};

是不是发现问题了？

text这个属性根本不存在于div标签中！

所以我们将其改为children就可以了。

const App = () => {
  const text = "Hello React!";
  return <div>{text}</div>;
};

再次运行npm start，终端上的报错终于消失了。

现在我们已经能够在本地运行起我们的项目了，接下来就该看看如何打包项目了。