当前位置:首页 > javascript技术文章 > React 项目迁移 Webpack Babel7的实现

分享React 项目迁移 Webpack Babel7的实现

  • 发布时间:
  • 作者:码农之家原创
  • 点击:142

这篇文章主要知识点是关于React、Webpack、Babel7、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript忍者秘籍
  • 类型:JavaScript大小:38.6 MB格式:PDF作者:John
立即下载

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

关于sails框架的学习指南

详细介绍python实现自动登录后台管理系统

Vue+ElementUI项目怎样使用webpack输出MPA

ThinkPHP 模板substr的截取字符串函数实例讲解

分享element UI upload组件上传附件格式限制方法

展开 +

收起 -

javascript 相关电子书
学习笔记
网友NO.623115

JavaScript中的Math.LOG2E属性使用详解

这将返回基数2的对数e,大约是 1.442. 语法 Math.LOG2E 例子: htmlheadtitleJavaScript Math LOG2E Property/title/headbodyscript type="text/javascript" var property_value = Math.LOG2E document.write("Property Value is : " + property_value); /script/body/html 这将产生以下结果: Property Value is : 1.4426950408889633 ……

网友NO.447107

详解javascript 正则表达式之分组与前瞻匹配

本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识,本人一直对两种匹配模棱不清。所以在这里总结一下,如有不对,还望大神指点。 1.分组匹配: 1.1捕获性分组匹配 () 2.2非捕获性分组匹配 (?:) 2前瞻匹配: 2.1正向前瞻匹配: (?=表达式) 后面一定要匹配有什么 2.2反向前瞻匹配: (?!表达式) 后面一定不能要有什么 1.1、捕获性分组匹配 () var str1 = "holle word 123456 can 12s a 123 a";var reg1 =/([a-z]+)\s(\d+)/; //不是全局模式 ,以() 分组,这里有两组,每一组都将匹配得到var regg1 = /([a-z]+)\s(\d+)/g; //全局模式 g,以() 分组,这里有两组,每一组都将匹配得到//res :非全局模式console.log(reg1.exec(str1)); //exec()方法:["wold 123456","word","123456"]console.log(str1.match(reg1));//match()方法:["word 123456","word","123456"]console.log(RegExp.$1);//获取到第一个分组 ([a-z]+)……

网友NO.636608

javascript基本数据类型和转换

ECMAScript中有5种基本数据类型:Undefined、Null、Boolean、Number、String。还有1种复杂数据类型—Object,Object实质上是由一组无序的名值对(键值对)组成的。ECMAScript不支持任何创建自定义类型的机制。 由于ECMAScript是松散型的,所以需要一种手段来检测变量的数据类型,typeof就是具有这种功能的操作符。用typeof检测变量可能返回以下某个字符串: "undefined" 变量未定义 "boolean" 变量是布尔值 "string" 变量是字符串 "number" 变量是数值 "object" 变量是对象或者null "function" 变量是函数 从技术的角度讲,函数在ECMAScript中是对象,不是一种数据类型。然而,函数有一些特殊的属性,因此通过typeof来区分函数和其它对象是有必要的。 Undefined类型只有一个值,就是特殊的undefined。在使用var声明变量但未初始化时,这个变量的值就是undefined,如: var a;alert(a == undefined); //true 不……

网友NO.101081

js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

这算是酝酿很久的一篇文章了。 JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕。 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了。 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1、创建对象 2、__proto__与prototype 3、继承与原型链 4、对象的深度克隆 5、一些Object的方法与需要注意的点 6、ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new 出来的本文称作 实例对象,构造函数的原型属性本文称作 原型对象。 创建对象 字面量的方式: var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}} 就是new Object()的语法糖,一样一样的。 工厂模式: function createCar(){ var oTemp = new Object(); oTemp.name = arguments[0]; //直接给对象添加属性……

网友NO.597747

javascript特殊用法示例介绍

语法一: function sayWhat(msg){ alert(msg); } sayWhat("你好"); 等价于下面语法(js闭包(匿名自执行函数)语法): (function(msg){ alert(msg); })("你好"); ……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757