手把手带你搭建与配置Webpack + ES6 + React开发环境

最新推荐文章于 2023-03-15 16:58:04 发布
最新推荐文章于 2023-03-15 16:58:04 发布
阅读量229 收藏
点赞数
分类专栏： webpack React 文章标签： webpack react  ea6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WRian_Ban/article/details/102651772
版权

首先通过手把手带你搭建与配置Webpack + ES6 最新开发环境我们已经获得了一个可以使用ES6及JSX语法的环境。现在让我们一起在这个项目中使用React。基于这里的原码Liz606/webpack-es6-anyFrame进行优化即可。

安装react

npm i react react-dom react-router-dom

安装解析工具

npm i -D @babel/preset-react

修改.babelrc

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ],
  "plugins": ["@babel/transform-runtime",
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    "@babel/plugin-proposal-class-properties",
  ]
}

此时以及可以解析react了，因为在配置webpack时，解析js顺便就把jsx解析了。
就是这一部分

···
  module: {
    rules: [
      {
        //处理jsx,js
        test: /\.(jsx?)$/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: evn === EVN.dev,
            sourceMap: evn === EVN.dev,
          },
        }
      },
···

做个小实验

修改src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div> // 主要是要有这个容器
</body>
</html>

写个组件吧
src/layout.jsx

import React from 'react';

class LayoutPage extends React.Component {
    render() {
      return (
        <div>
          Hello {this.props.name}
        </div>
      );
    }
  }

  export default LayoutPage;

在入口文件载入React
src/index.js

import React from 'react';
import {render} from 'react-dom';
import LayoutPage from './layout';

render(
    <LayoutPage name="Lizzy" />,
    document.getElementById('root')
);

表现还行，能用····哈哈哈哈哈
在这里插入图片描述

那等雨停吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Babel transform-runtime
ivenqin的博客
04-14 1007
Babel @babel/plugin-transform-runtime 本节我们来学习 @babel/plugin-transform-runtime 和 @babel/runtime 。 Babel 中使用辅助函数来实现常见功能，例如 _extend() 函数，每个编译后的文件都需要定义它所需要使用的辅助函数。但这样显然会造成很多重复，所以 Babel 把所有的辅助函数都封装于 @babel/runtime，每个编译后的文件只需要引用 @babel/runtime 即可。 @babel/runtim
webpack配置React开发详解版
weixin_41105030的博客
03-23 674
文档 React官方文档的学习 webpack的配置 webpack的babel-loader的配置 文件夹的解释 dist用来放入打包后的文件（生产时） src这是我们开发时的文件（css和less主要是这里用来测试的） index.html（我们的页面，放一个容器来让其他元素渲染进去） <div id="app"></div> webpack.config.j...
webpack5搭建react框架-基础环境配置
前端三脚猫的博客
03-15 1488
通过使用webpack5搭建基础react框架来学习webpack相关知识。
基于webpack从零开始自己配置react项目
vity_tong的博客
12-03 1096
每当自己想要用心写demo的时候，会发现项目开始之前的配置总是让我很烦，如果直接使用脚手架生成一个react项目，看起来方便，但是事实上一大堆配置文件很多都用不上或者看不懂，而且本身就是基于webpack实现的，但是它的配置文件并没有暴露出来，开发者也不知到它内置了哪些功能，哪些插件，非常难受，所以从零开始配置属于自己的webpack+react项目框架
React项目创建以及webpack配置与热更新
weixin_40200876的博客
07-27 4171
1、cd到文件夹：我以当前日期为文件夹名 2、初始化，终端输入： npm init 回车键： 输入package name，括号内是提示，你可以按照提示输入，我这就按提示输入了，回车 version：可以不输入，就直接回车了 description：可以不输入 entry point：入口文件一般都命名为index.js test command: 可以不输入 git r...
详解Webpack + ES6 最新环境搭建与配置
08-27
主要介绍了详解Webpack + ES6 最新环境搭建与配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-webpack：构建react + webpack + es6环境
01-31
这是一个建造webpack + react项目脚手架的简易教程，参照了的配置方式。每一个例子都有非常详细的建造步骤。 运行并启动项目 克隆项目到本地以后，选择要运行的示例进入到该项目路径下 安装： npm install 运行： ...
浅谈react+es6+webpack的基础配置
08-29
本文将带领大家从头开始，学习如何配置React+ES6+Webpack的基础环境。 一、安装Node.js 首先，需要安装Node.js，Node.js是JavaScript的运行环境，可以在Node.js官网上下载最新版的Node.js。 二、安装Webpack ...
基于react+redux+react-router+webpack+es6+axios的仿QQ音乐客户端项目（毕设&课设）
最新发布
05-28
基于react+redux+react-router+webpack+es6+axios的仿QQ音乐客户端项目，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介： 技术栈 react react-router ...
使用webpack4从零配置react项目
张致豪
11-10 1880
前言 以前做react项目的时候都是使用create-react-app脚手架初始化项目的，最近想自己从零配置webpack来实现一个react项目的初始化。 打包后的目录结构： 创建文件件sty-react-template 初始化git仓库、生成package.json文件 git init yarn init ...
从零配置Webpack4.0搭建一个React工程
lulitianyu的专栏
04-10 2498
最近一直大部分精力都在搞App以及Node。前端这块作为初心，还是不能落下。这里不用cli。一步一步记录从零配置Webpack，来搭建起React项目。复习一下Webpack的配置。以及一些前端工程化的一些思考前段工程化思考说道前端工程化，最重要的一个目的就是：解放生产力。对源代码进行预处理、自动打包/自动更新页面显示、去处理图片依赖和正式环境统一这几点在开发中极大提高了开发的效率。在搭建起项目工...
webpack+react
kelly2017zh的博客
01-06 169
webpack的中文官网：https://doc.webpack-china.org
react 引入less 2018/12/21
weixin_40046130的博客
12-21 1003
最新的react包 引入less npm install less less-loader --save npm run eject 暴露出webpack 找到build中webpack.config.dev.js 新版本貌似引入sass  所以我们把关于sass 替换成less就ok 将sass替换成less 将sass-loader替换成less-loader 嫌麻烦的直接复制下面代码...
轻松入门React和Webpack
weixin_34306446的博客
05-15 150
小广告：更多内容可以看我的博客和读书笔记 最近在学习React.js，之前都是直接用最原生的方式去写React代码，发现组织起来特别麻烦，之前听人说用Webpack组织React组件得心应手，就花了点时间学习了一下，收获颇丰 说说React 一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。...
前端webpack构建react系列一：开端，让webpack跑起来
kiramario的博客
03-19 1709
使用打包技术 什么是webpack打包，我简单地理解为将其他一系列语法(react，JSX，ES6)重新构建成JS。为什么这么做？是因为前端发展到模块化概念，状态驱动概念，有了更新的标准，但这些优秀的概念并没有被标准化，打包就是为了翻译这些新语法使其适应于当前标准，可以理解为JS的浏览器兼容性问题（大家回忆一下这个：客户死活不愿意用google浏览器之IE浏览器兼容性）。 环境介绍 ...
webpack如何与react进行配合
thebigbuding的博客
08-23 882
记录一下如何用webpack来开启react项目 创建文件夹并配置webpackmkdir myapp cd myapp先创建和进入该文件夹，之后开始配置webpack。首先是全局安装webpack，然后是在该文件里安装依赖。 npm install webpack -g npm install webpack --save-dev 然后初始化`npm init`这时会出现一个package.
webpack - babel配置
weixin_34146986的博客
04-03 299
webpack - babel配置 babel是一个javascript编译器，是前端开发中的一个利器。它突破了浏览器实现es标准的限制，使我们在开发中可以使用最新的javascript语法。 通过构建和babel，可以使用最新js语法进行开发，最后自动编译成用于浏览器或node环境的代码。 webpack中使用babel 配合webpa...
babel-polyfill与babel-plugin-transform-runtime
皖林的博客
07-22 5049
babel-polyfill babel-polyfill在应用中会模拟一个es2015+的环境，所以使用了babel-polyfill后可以使用内置对象如Promise和WeakMap，静态方法如Array.from和Object.assign，实例方法如Array.prototype.includes，以及generator函数（需要提供babel-plugin-transform-rege...
babel-loader，babel-core，babel-polify，babel-plugin-transform-runtime之间的关系
SailorCai的技术博客
07-15 3296
babel-core在npm官网中的解释是Babel compiler core.也就是Babel编译器的核心，因此意味着如果要使用babel-loader进行es6的转码你首先必须得安装babel-corenpm install --save-dev babel-corebabel-core安装了就行，无需手动配置和引入。搞懂了babel-loader和babel-core的关系，那babel-...
使用Vue全家桶+ES6++Webpack+Axios如何实现登录、注册、商品列表展示与分页，搜索、商品详情、加入购物车、查看订单详情、支付等功能
07-25
使用Vue全家桶+ES6+Webpack+Axios可以实现登录、注册、商品列表展示与分页、搜索、商品详情、加入购物车、查看订单详情和支付等功能的具体实现如下： 1. 登录和注册功能： - 创建登录和注册的组件，包括输入框和按钮等元素。 - 在组件中使用Vue的双向数据绑定，将用户输入的用户名和密码与组件的数据进行绑定。 - 使用Axios发送POST请求将用户输入的用户名和密码发送到后端API进行验证。 - 根据后端返回的验证结果，进行相应的处理，如跳转到首页或显示错误信息。 2. 商品列表展示与分页功能： - 创建商品列表组件，使用Axios发送GET请求获取商品列表数据。 - 将获取到的商品列表数据绑定到组件的数据中。 - 使用Vue的v-for指令遍历商品列表数据，展示商品的相关信息。 - 实现分页功能，根据用户点击的页码发送相应的请求获取对应页码的商品列表数据。 3. 搜索功能： - 在商品列表组件中添加搜索框和搜索按钮等元素。 - 使用Vue的双向数据绑定，将用户输入的关键词与组件的数据进行绑定。 - 监听用户点击搜索按钮事件，在事件处理函数中使用Axios发送GET请求，将关键词作为参数发送到后端API进行搜索。 - 根据后端返回的搜索结果进行展示，更新商品列表数据。 4. 商品详情功能： - 创建商品详情组件，接收商品ID作为参数。 - 使用Axios发送GET请求，根据商品ID获取商品详情数据。 - 将获取到的商品详情数据绑定到组件的数据中，展示商品的详细信息。 5. 加入购物车功能： - 在商品详情组件中添加加入购物车按钮。 - 监听加入购物车按钮的点击事件，在事件处理函数中使用Axios发送POST请求，将商品ID和用户ID等信息发送到后端API进行处理。 - 后端API将用户选择的商品加入购物车，并返回相应的结果。 6. 查看订单详情和支付功能： - 创建订单详情组件，接收订单ID作为参数。 - 使用Axios发送GET请求，根据订单ID获取订单详情数据。 - 将获取到的订单详情数据绑定到组件的数据中，展示订单的相关信息。 - 实现支付功能，根据用户选择的支付方式使用Axios发送POST请求，将支付相关的信息发送到后端API进行处理。 通过以上步骤的实现，您可以在Vue全家桶+ES6+Webpack+Axios的技术栈下完成登录、注册、商品列表展示与分页、搜索、商品详情、加入购物车、查看订单详情和支付等功能的开发。希望对您有所帮助！如果有任何进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值