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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
使用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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
Python中的类学习笔记
2014/09/23 Python
django中send_mail功能实现详解
2018/02/06 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
python字符串反转的四种方法详解
2019/12/02 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
linux面试题参考答案(5)
2014/09/01 面试题
竞选班长自荐书范文
2014/03/09 职场文书
小学二年级评语
2014/04/21 职场文书
大学开学计划书
2014/04/30 职场文书
学生实习证明范文
2014/09/28 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
中考学习决心书
2015/02/04 职场文书
2016新年慰问信范文
2015/03/25 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js