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 防止刷新,后退,关闭
Aug 07 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
Node.js学习入门
Jan 03 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
create-react-app中添加less支持的实现
Nov 15 Javascript
vue中英文切换实例代码
Jan 21 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php实现计数器方法小结
2015/01/05 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
JavaScript的Cookies
2008/01/16 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
vue抽出组件并传值实例
2020/07/31 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python配置文件写入过程详解
2019/10/19 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
个人实用的自我评价范文
2013/11/23 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android