数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

React 项目迁移 Webpack Babel7的实现

来源:脚本之家  责任编辑:小易  

不久前写了一篇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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:


  • 本文相关:
  • 详解webpack+babel+react开发环境的搭建的方法步骤
  • 详解webpack2+node+react+babel实现热加载(hmr)
  • javascript判断字符长度、数字、email、电话等常用判断函数分享
  • javascript动态生成二维码图片
  • three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
  • javascript日期类型的一些用法介绍
  • javascript事件冒泡和事件捕获详解
  • js延时提示框实现方法详解
  • 常用的javascript设计模式小结
  • 使用闭包对settimeout进行简单封装避免出错
  • javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
  • 原生js实现查询天气小应用
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved