React 项目迁移 Webpack Babel7的实现

不久前写了一篇webpack 4 升级迁移 这里简单说下 React 项目的一些配置；

首先我们新建项目 react-web ，然后进入项目初始化 package.json ；

cd react-web && npm init

接下来我们安装 webpack，这里需要注意一点，是命令行已经单独提取出来了，我们不仅需要安装 webpack 还需要安装 webpack-cli。

npm i webpack webpack-cli --save-dev

接下来我们开始安装和 react 相关的依赖包；

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

接下来我们初始化 babel 的配置文件。

touch .babelrc

然后把下面内容粘贴进去；

{
 "presets": ["@babel/preset-env", "@babel/preset-react"]
}

实际上 webpack 4 是可以支持无配置构建的，但是我们还是按照传统的方式写一下配置文件;我们新建 webpack.config.js

module.exports = {
 module: {
 rules: [
  {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
   loader: "babel-loader"
  }
  }
 ]
 }
};

接下来我们开始 做点和 React 组件相关的东西；

npm i react-dom react prop-types --save-dev

我们在 src 下新建目录 components ；

我们建立一个 Header.js 和 Footer.js .

Footer.js

import React, { Component } from "react";

class Footer extends Component {
 constructor() {
 super();
 this.state = {
  year: "2018"
 };
 }
 render() {
 return (
  <footer class="ft">
   copyright © {this.state.year}
  </footer>
 );
 }
}
export default Footer;

Header.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
class Header extends Component {
 constructor() {
 super();
 this.state = {
  year: "2018"
 };
 }
 render() {
 return (
  <header class="hd">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Logo</a>
   <ul class="pull-right">
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link1</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link2</a></li>
   </ul>
  </header>
 );
 }
}
export default Header;

然后我们新增文件 src/index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Header from "../src/components/Header";
import Footer from "../src/components/Footer";

class ReactApp extends Component {
 constructor() {
 super();
 }

 render() {
 return (
  <div class="main">
   <Header></Header>
   <Footer></Footer>
  </div>
 );
 }
}

ReactDOM.render(<ReactApp />, document.getElementById('react-app'));

export default ReactApp;

接下来我们需要预览页面，我们引入下 html-loader

npm i html-webpack-plugin html-loader --save-dev

修改我们的 webpack 配置:

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
 module: {
 rules: [
  {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
   loader: "babel-loader"
  }
  },
  {
  test: /\.html$/,
  use: [
   {
   loader: "html-loader"
   }
  ]
  }
 ]
 },
 plugins: [
 new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
 })
 ]
};

我们在 src 下新建 index.html 然后添加下面的内容:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" >
 <title>React & Webpack4</title>
</head>
<body>
 <div class="container">
  <div class="row mt-5">
   <div class="col-md-4 offset-md-1">
    <p>Create a new article</p>
    <div id="react-app">
    </div>
   </div>
  </div>
 </div>
</body>
</html>

接下来我们安装 webpack-dev-server 在开发时用于起一个服务器预览;

npm i webpack-dev-server --save-dev

接下来修改 npm scripts：

"scripts": {
 "start": "webpack-dev-server --open --mode development",
 "build": "webpack"
}

差不多已经完成一部分了，后面你就可以再安装其他 react 套件了；

当然如果觉得麻烦你也可以使用 yarn-react-webpack-seed 。

扩展阅读

https://www.valentinog.com/blog/react-webpack-babel/
https://reacttraining.com/react-router/web/api/HashRouter
https://github.com/JackPu/yarn-react-webpack-seed

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解webpack2+node+react+babel实现热加载(hmr)

    详解webpack2+node+react+babel实现热加载(hmr)

    前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁. 1. 先看效果 2.目录结构 3.项目目录结构文件描述 bin 执行文件 node_modules node包 public 静态资源文件 static 静态资源 dist 编译后文件 src 项目js文件 .bablrc babel配置文件 webpack.config.dev.js开发模式webpack配置 webpack.config.pro.js生产模式we

  • 详解Webpack+Babel+React开发环境的搭建的方法步骤

    详解Webpack+Babel+React开发环境的搭建的方法步骤

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等)作为模块进行编译后进行打包. 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装. npm install webpack -g 3.创建一个项目 安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹,当然项目名字你可以起你自己想要的

  • React 项目迁移 Webpack Babel7的实现

    不久前写了一篇webpack 4 升级迁移 这里简单说下 React 项目的一些配置: 首先我们新建项目 react-web ,然后进入项目初始化 package.json : cd react-web && npm init 接下来我们安装 webpack,这里需要注意一点,是命令行已经单独提取出来了,我们不仅需要安装 webpack 还需要安装 webpack-cli. npm i webpack webpack-cli --save-dev 接下来我们开始安装和 react 相关的依

  • 详解antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么 作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年

  • 快速创建React项目并配置webpack

    目录 1.快速创建React项目 2.安装所需包 3.根目录创建webpack.config.js文件,代码如下 4.在根目录下添加文件 .babelrc,代码如下 5.修改 package.json 6.修改public/index.html文件 7.修改src/index.js文件 8.修改src/App.js文件 9.修改 src/App.css文件 10.在项目根目录下执行 1.快速创建React项目 npm install -g create-react-app // 全局安装crea

  • Vue 项目迁移 React 路由部分经验分享

    Vue 项目迁移 React 路由部分经验分享

    目录 引言 Vue Router: React Router V5: 升级到 React Router V6 引言 最近在把 Vue2.6 的老项目代码迁移到 React,以便统一技术栈更好维护. 首先遇到的难点和思维模式上的转变是:路由的迁移问题.Vue Router 迁移到 React Router,需要怎么支持嵌套的路由? 直观感觉它们之间的异同: Vue Router: 默认使用字面量对象指定路由配置(children 属性嵌套子路由配置); 视图上使用 <router-view/>

  • 从零开始搭建一个react项目开发

    本文介绍了从零开始搭建一个react项目开发,分享给大家,具体如下: 1.npm init 生成 package.json 文件. 2.安装各种需要的依赖: npm install  --save react - 安装React. npm install  --save react-dom 安装React Dom,这个包是用来处理virtual DOM.这里提一下用React Native的话,这里就是安装react-native. npm install  --save-dev webpack

  • react.js使用webpack搭配环境的入门教程

    react.js使用webpack搭配环境的入门教程

    本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建,my-app为项目名称

  • 详解React项目的服务端渲染改造(koa2+webpack3.11)

    详解React项目的服务端渲染改造(koa2+webpack3.11)

    因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要

  • 详解vue-cli@2.x项目迁移日志

    详解vue-cli@2.x项目迁移日志

    vue-cli@2.x项目迁移日志 虽然 vue-cli@3 早就已经巨普及了,新项目应该已经很少有人还有使用 vue-cli@2.x . 但是对于一些稍微早些时候的 vue 项目,如果当时没有做一些优化.配置,随着 webpack vue 等包的升级,有一些配置已经不一样了,并且关于 vue-cli@2.x 项目的文档.博客也越来越少,如果遇到问题也许也会有麻烦,因此就想着把当前的 vue-cli@2.x 项目原地升级配置. 项目结构 vue-cli@2.x 项目结构,其中红色圈出的部分是 2

  • 详解React项目如何修改打包地址（编译输出文件地址）

    好吧,笔者是一个后端开发.以前是做C/S项目出身,毫无Web前端基础,为了更好地理解Web开发,去年开始尝试使用公司使用的前端框架React来搭建团队内部使用的系统.通过这个项目的开发,也让我更好地理解了前端同事的不容易,更加坚定了写好接口文档的决心. 最近在把自己做的这个内部系统迁移到公司的统一平台的时候,遇到了一个小问题,公司要求打包的目录名必须为dist,而我这个项目是使用create-react-app搭建的,所以打包的目录是默认的build. 遂开始了查找如何修改打包目录的资料.随便在

  • 基于webpack4搭建的react项目框架的方法

    介绍 框架介绍,使用webpac构建的react单页面应用,集成antd.使用webpack-dev-server启动本地服务,加入热更新便于开发调试.使用bundle-loader进行代码切割懒加载 手动搭建,不使用cli,大量注释适合初学者对webpack的理解学习,对react项目的深入了解 启动 git clone https://gitee.com/wjj0720/react-demo.git cd react-demo yarn yarn start 打包 yarn build 目录

随机推荐