React 项目迁移 Webpack Babel7

内容简介：不就前写了一篇webpack 4 升级迁移这里简单说下 React 项目的一些配置；首先我们新建项目接下来我们安装

不就前写了一篇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 &copy {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="#">Logo</a>
          <ul class="pull-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">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" >
    <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 。

扩展阅读

以上所述就是小编给大家介绍的《React 项目迁移 Webpack Babel7》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Developer's Guide to Social Programming

Mark D. Hawker / Addison-Wesley Professional / 2010-8-25 / USD 39.99

In The Developer's Guide to Social Programming, Mark Hawker shows developers how to build applications that integrate with the major social networking sites. Unlike competitive books that focus on a s......一起来看看《Developer's Guide to Social Programming》这本书的介绍吧!

码农工具

SHA 加密

SHA 加密工具

XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具

HEX HSV 互换工具