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 相关文章推荐
js中的this关键字详解
Sep 25 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
JS打印组合功能
Aug 04 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 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教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
layer插件select选中默认值的方法
2018/08/14 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python3多线程操作简单示例
2018/05/22 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
学生会干部自荐信
2014/02/04 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
先进典型发言材料
2014/12/30 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python