前端技术之：使用webpack构建React程序配置方法

最新推荐文章于 2024-03-22 13:26:39 发布

原创最新推荐文章于 2024-03-22 13:26:39 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #Node.js #React.js #Webpack

前端技术专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在React项目中配置Babel和Webpack，包括必要的依赖安装，如@babel/core, @babel/preset-env, @babel/preset-react, babel-loader等，以及在webpack.config.js中设置模块解析规则。

package.json中需要引入以下依赖：

开发依赖：

"@babel/core": "^7.1.2",

"@babel/preset-env": "^7.1.0",

"@babel/preset-react": "^7.0.0",

"babel-loader": "^8.0.4”,

运行时依赖：

"react": "^16.6.0",

"react-dom": "^16.6.0"

webpack.config.js中需要增加以下模块解析处理规则：

{

test: /\.m?js$/,

exclude: /(node_modules|bower_components)/,

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

}

更详细的安装与配置方法请参考以下链接：

https://github.com/babel/babel-loader

https://babeljs.io/docs/en/next/babel-preset-react.html

https://www.npmjs.com/package/react

https://www.npmjs.com/package/react-dom

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

静心悦纳

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【异常】前端Babel提示 Support for the experimental syntax ‘jsx‘ isn‘t currently enabled

本本本添哥

02-01

3890

Support for the experimental syntax 'jsx' isn't currently enabled (20:19):

React 开发（二十五）：使用 Webpack 打包 React 应用 - 配置与优化

11-10

1613

Webpack 是一个模块打包器，它能够将应用的不同资源（JavaScript、CSS、HTML、图片等）视为模块，并将这些模块打包成一个或多个 bundle 文件。Webpack 不仅能处理 JavaScript，还支持 CSS、图片、字体等静态资源的处理，是前端构建工具链中的核心部分。

参与评论您还未登录，请先登录后发表或查看评论

一步一个脚印搭建简易React

qq_41022872的博客

10-23

331

一步一个脚印搭建简易React 准备环境： node环境 vscode编辑器初始化项目 // 创建一个文件夹，当然你也可以手动创建 mkdir my-react // 进入到项目目录 cd my-react // 生成pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中 npm init 搭建项目环境由于我们的目的是实现一个简易的React,为了能把更多的重心花在React上，我们需要借助一些工具来帮助我

手把手教你如何配置Babel系列(一)

卡洛背心的博客

07-21

2783

目标本文的目的是帮助对Babel不熟悉的人了解如何书写Babel的配置文件，设计一个“最完美”的 Polyfill 方案由于内容比较多，我会把下面的目录中的内容分成四个章节去讲解第一章节什么是Babel 插件和预设配置文件简单Demo演示第二章节什么是core-js？第三章节什么是Polyfill？ @babel/polyfill介绍 @babel/preset-env实战第四个章节 @babel/runtime实战 @babel/plugin-transform-r.

react项目安装与配置

柒君的博客

08-27

846

CLI: npm install -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-syntax-dynamic-import babel-loader style-loader css-loader

来会会babel这个重要且神奇的工具

开心学前端 : )

05-08

1938

babel 在前端工程化开发中发挥着至关重要的作用，它能将较高级的语法转成浏览器可识别的代码，无论中 es6 中 const 、promise 还是 React、TypeScript。以下babel在线工具中左侧输入代码，右侧为编译后的结果，设置需要浏览器兼容的版本后，可以看到 “const” 编译成 “var”，“箭头函数” 编译成 “普通函数”。命令行使用 babel 和之前说到的 postcss 一样，可以通过命令行运行，解析文件夹或者文件。安装命令行工具所需要的依赖，npm install @

react_webpack_demo:使用Webpack构建React应用程序

04-27

通过以上步骤，我们可以成功地使用Webpack构建React应用程序。实际项目中，可能还会涉及更多细节，如处理静态资源、集成CSS预处理器、错误捕获等。不断学习和实践，将使你更加熟练地驾驭这两个强大的工具，构建出高...

webpack-react:使用Webpack和React设置开发环境

05-17

在IT行业中，构建Web应用程序的过程中，前端开发工具的使用至关重要，Webpack和React是现代前端开发的两大神器。本文将深入探讨如何使用Webpack和React来设置一个高效的开发环境。 Webpack是一个模块打包工具，它能...

blogger:使用Webpack，React-router，React，Express，MongoDB和Node.js构建的博客

05-13

:person_running: 使用Webpack，React-router，React，Express，MongoDB和Node.js构建的博客前端框架： React，React-router，React-dom 前端Ajax通信： axios 前端Web RWD设计： Material-ui 后端： Node.js...

react-boilerplate：使用webpack构建的react应用的样板代码

02-13

React-Boilerplate是一个流行的项目模板，用于快速搭建基于React技术栈的Web应用程序。它集成了现代前端开发的必备工具，如Webpack、Babel、Redux等，为开发者提供了一个高效、可扩展的基础架构。让我们深入了解一下...

react项目配置babel编译jsx

qq_37314372的博客

07-13

2198

react项目配置babel编译jsx 摘要从零搭建react项目，webPack4+babel-loader8 配置须知 babel-loader7.x 要与 babel6.x 结合使用 babel-loader8.x 要与 babel7.x 结合使用这里以babel-loader8.x为例，使用npm 进行如下安装： npm i @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform

040 babel/preset-react

MichaelAn的博客

02-13

519

040 babel/preset-react 开发中使用的库用途处理 react 的预设，包括下面的插件(编译jsx) This preset always includes the following plugins: @babel/plugin-syntax-jsx @babel/plugin-transfo...

使用webpack/babel构建react开发环境（最新版）

weixin_44145479的博客

05-18

1586

1.下载依赖包 npm install webpack webpack-cli -D npm install webpack-dev-server -D webpack.config.js let htmlWebpackPlugin = require('html-webpack-plugin') let path = require('path') let htmlWP = new htm...

react源码分析：babel如何解析jsx

weixin_59558923的博客

11-09

611

不管是类组件还是函数组件，最终我们写的jsx都被babel转化成了可识别的元素，其中我们也看了,,Component等内部实现，了解到了作为他是怎么被创建的，但是远远没有完，因为我们知道我们在写React的时候，会在后面带上一个，没错我们下一章节就要去探索一下方法了。

关于Vue的一些写法及问题记录

jingchao1998的博客

08-08

1968

∮ 获取组件使用时 v-model 绑定的对象名称 this.$vnode.data.model.expression 例如：  <template> <vs-radio v-model="radio" value="0"></vs-radio> </template> <script> export default { name: "Index", data () { retur

React中Babel的配置

kitty007th的博客

03-22

1233

Babel的配置因为继承了Facebook的官方配置，自己项目中需要做的配置就简单得多了，但是仍需注意React的官方大致都完成了什么配置，可参考github上的。2. Babel配置文件中直接继承React的官方配置。

通过webpack从零开始搭建React项目

knowledge_bird的博客

04-26

4193

从零开始搭建React项目 1. Webpack基础概念 webpack主要作用：代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功...

箭头函数报错：Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section o...

DXsunrise的博客

07-22

5178

解决：根目录新建babel.config.js加入如下内容 module.exports = { presets: [ "@babel/preset-env", "@babel/preset-react" ], plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-p...

React+webpack+Babel项目搭建及配置

dzm123689的博客

10-29

879

React+webpack+Babel项目搭建及配置参考GitHub链接：https://github.com/theJian/build-a-hn-front-page 安装node.js 安装webapck(打包工具): npm install webpack@4.23.1 –g 安装webpack-dev(webpack服务器):npm install webpack-dev-serve...

Web前端技术整合：Webpack与React结合Tailwindcss

React： React是Facebook开发和维护的一个用于构建用户界面的JavaScript库。React以声明式的方式编写组件，这些组件可以描述视图在不同状态下的表现。React的虚拟DOM（Virtual DOM）机制允许开发者编写高效且响应式...