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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
Jquery $when done then的用法详解
May 20 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
canvas绘制七巧板
Feb 03 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
vue实现分页加载效果
Dec 24 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下intval()和(int)转换使用与区别
2008/07/18 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
使用python绘制温度变化雷达图
2019/10/18 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
建设工地安全标语
2014/06/07 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
小学运动会演讲稿
2014/08/25 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书