前语

从零搭一个极简版 webpack+React 工程(一)

书接上文，在上文中作者现已能够运用 webpack 对简略的 js 文件打包开发，并且实时显现在浏览器中；那么假如作者想运用 React 这类前端库开发应该怎样办呢？

本期讲解怎么运用 webpack 运用 React 前端库开发

文件地址

GitHub 地址

支撑 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 调用 1
  • babel-loader : @babel/core 在做 es6 的语法转化和弥补缺失的功能，但是在运用 webpack 打包 js 时，webpack 并不知道应该怎样去调用这些规则去编译 js。这时就需求 babel-loader 了，它作为一个中心桥梁，经过调用 babel/core 中的 api 来奉告 webpack 要怎么处理 js1。
  • @babel/preset-react:预设了一些 Babel 插件，主要负责编译 React 语法2。

装置完依靠持续

修正 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/ 你将看到下图

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

假如想在 React 中运用 Typescript 呢？毕竟现在 Typescript 是一个趋势；该怎么处理？

支撑 Typescript

简略，装置 @babel/preset-typescript 修正一下 webpack 装备即可实现

装置@babel/preset-typescript

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

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>
}

当时目录结构

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

从头启动

履行

npm start

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

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

结语

目前为止 webpack+react 这个极简版的小工程现已能够支撑 React+Typescript 了，第二段到此结束。期望本篇文章能够帮到你。

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

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

下一篇：从零搭一个极简版webpack+React工程（三)