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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
关于使用axios的一些心得技巧分享
Jul 02 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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
深入了解php4(1)--回到未来
2006/10/09 PHP
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
python 读写、创建 文件的方法(必看)
2016/09/12 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
学校志愿者活动总结
2014/06/27 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
行政申诉状范文
2015/05/20 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python