初始化React 项目使用webpack和Babel

最新推荐文章于 2024-07-26 12:28:02 发布

jomes_wang

最新推荐文章于 2024-07-26 12:28:02 发布

阅读量678

点赞数

文章标签： vue java javascript js react

本文链接：https://blog.csdn.net/jomes_wang/article/details/111627387

版权

今天建react 项目的时候发现在一个典型的React项目中，我们使用Babel和Webpack。 Babel用于将JSX和ES6转换为纯ES5代码。 Webpack用作捆绑程序。在这一篇文章中，我们从头开始对React 项目的建立。首先创建一个 react-starter 的文件夹。之后在文件夹内部操作。一：初始化 Package.json 文件夹在Node项目中，packa...

摘要由CSDN通过智能技术生成

今天建react 项目的时候发现

在一个典型的React项目中，我们使用Babel和Webpack。 Babel用于将JSX和ES6转换为纯ES5代码。 Webpack用作捆绑程序。在这一篇文章中，我们从头开始对React 项目的建立。

首先创建一个 react-starter 的文件夹。之后在文件夹内部操作。

一：初始化 Package.json 文件夹

在Node项目中，package.json文件存储有关项目的信息，例如其名称，许可证，脚本，依赖项等。我们可以使用这一条命令来创建package.json文件。

npm init -y

-y标志用于设置默认值。现在，在项目文件夹中创建了一个package.json文件，内容如下。

{
    
  "name": "react-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

二：创建资源文件夹

因此，首先在根目录中创建一个文件夹src。现在，该文件夹将包含所有使用JSX编写的React组件代码，使用SCSS编写的样式以及用于呈现React组件的模板HTML。当我们构建项目时，所有的JSX将被转换为JavaScript，所有的SCSS将被转换为纯CSS，HTML将使用所需的文件引用进行更新，并复制到/ dist文件夹中。

创建一个 src/index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0&

最低0.47元/天解锁文章

jomes_wang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
初始化React 项目使用webpack和Babel

今天建react 项目的时候发现在一个典型的React项目中，我们使用Babel和Webpack。 Babel用于将JSX和ES6转换为纯ES5代码。 Webpack用作捆绑程序。在这一篇文章中，我们从头开始对React 项目的建立。首先创建一个 react-starter 的文件夹。之后在文件夹内部操作。一：初始化 Package.json 文件夹在Node项目中，packa...
复制链接

扫一扫