React 项目迁移 Webpack Babel7的实现


Posted in Javascript onSeptember 12, 2018

不久前写了一篇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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 继承详解(一)
Jul 13 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 #Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 #Javascript
浅谈webpack4 图片处理汇总
Sep 12 #Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 #Javascript
vue this.reload 方法 配置
Sep 12 #Javascript
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
JS中判断字符串存在和非空的方法
Sep 12 #Javascript
You might like
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
jQuery使用手册之一
2007/03/24 Javascript
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
Python迭代和迭代器详解
2016/11/10 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python实现的Iou与Giou代码
2020/01/18 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Python-openCV开运算实例
2020/07/05 Python
python中的列表和元组区别分析
2020/12/30 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
工厂搬迁方案
2014/05/11 职场文书
2014年售票员工作总结
2014/11/19 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
nginx中proxy_pass各种用法详解
2021/11/07 Servers