从零搭一个极简版webpack+React工程（二）

前言

书接上文，在上文中作者已经可以使用 webpack 对简单的 js 文件打包开发，并且实时显示在浏览器中；那么如果作者想使用 React 这类前端库开发应该怎么办呢？

本期讲解如何利用 webpack 使用 React 前端库开发

支持 React

安装 React


npm i react react-dom -S

复制代码

修改 src/index.js

import React from "react"
import ReactDOM from "react-dom"
export default function App() {
  return (
    <div>
      <h2>我是react</h2>
    </div>
  )
}

const root = document.getElementById("root")
ReactDOM.render(<App />, root)
复制代码

现在运行

npm start
复制代码

肯定是报错的，因为 webpack 并不认识 React，需要将 React 转换为普通的可运行的 Javascript ，这就需要用到了 Babel

Babel:Babel 是一个 JavaScript 编译器

安装 Babel


npm i babel-loader @babel/core @babel/preset-react -D

复制代码

解释：

@babel/core : 是 Babel 的核心库，所有的核心 Api 都在这个库里，这些 Api 供 babel-loader 调用 ¹
babel-loader : @babel/core 在做 es6 的语法转换和弥补缺失的功能，但是在使用 webpack 打包 js 时，webpack 并不知道应该怎么去调用这些规则去编译 js。这时就需要 babel-loader 了，它作为一个中间桥梁，通过调用 babel/core 中的 api 来告诉 webpack 要如何处理 js¹。
@babel/preset-react:预设了一些 Babel 插件，主要负责编译 React 语法²。

安装完依赖继续

修改 webpack.common.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
  entry: {
    // other
  },
  output: {
    // other
  },
  plugins: [
    // other
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)/,
        loader: "babel-loader",
      },
    ],
  },
}
复制代码

新建 `.babelrc`

根目录新建.babelrc 文件，并编辑下面的代码

{
  "presets": ["@babel/preset-react"]
}
复制代码

这个文件的作用是告知 webpack 在使用 Babel 解析 react 文件时，使用@babel/preset-react 这个预设

运行

现在重新执行

npm start
复制代码

试一下，在浏览器中打开 http://localhost:8888/ 你将看到下图

如果想在 React 中使用 Typescript 呢？毕竟现在 Typescript 是一个趋势；该如何处理？

支持 Typescript

简单，安装 @babel/preset-typescript 修改一下 webpack 配置即可实现

安装@babel/preset-typescript

@babel/preset-typescript : 预设了一些 Babel 插件，主要负责编译 Typescript 语法²

npm i @babel/preset-typescript -D
复制代码

修改.babel 文件

{
  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
}
复制代码

修改 webpack.common.js

// other
module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)/,
        loader: "babel-loader",
      },
    ],
  },
复制代码

修改 src/index.js

import React from "react"
import ReactDOM from "react-dom"
import Home from "./Home.tsx"
export default function App() {
  return (
    <div>
      <h2>我是react</h2>
      <Home />
    </div>
  )
}

const root = document.getElementById("root")
ReactDOM.render(<App />, root)
复制代码

因为 index.js 引入了 Home 组件，所以需要新建 Home.tsx 文件

新建 Home.tsx 文件

import React from "react"

type Props = {}

export default function Home({}: Props) {
  return <div>我是typescript</div>
}
复制代码

当前目录结构

重新启动

执行

npm start

复制代码

你将会在浏览器中看到下面图片中的文案

结语

目前为止 webpack+react 这个极简版的小工程已经可以支持 React+Typescript 了，第二段到此结束。希望本篇文章可以帮到你。

文中关于 babel 作用与使用部分参考 Babel 官方文档，在这里再次感谢开源社区的各位开发者，因为有你们的贡献，我学到了许多前端技能。

因作者水平有限，如在文中任何不足或者错误欢迎评论区留言指点。多谢！