webpack 实现对react 框架代码的打包

最新推荐文章于 2024-06-26 03:00:00 发布

原创最新推荐文章于 2024-06-26 03:00:00 发布 · 461 阅读

CC 4.0 BY-SA版权

本文介绍不使用React脚手架，直接用Webpack打包生成可用的React项目。借助Babel将React中的JSX语法转化为ES5语法，包括在Webpack官网找React选项、下载preset - react、配置Babel的presets，还提及下载react和react - dom、编写index.js代码及重启服务器等步骤。

这里我们不用 react 脚手架初始化一个React 项目了。我们直接用webpack 来打包生成一个可用的React 项目。当然，React 中的JSX 语法，我们需要借助babel 来转化为ES5 语法。下面就是配置了。

首先，我们在 webpack 官网的docs 中左侧栏的 presets 中可以找到react 的选项。

根据它的介绍，我们先要下载 preset-react (它可以解析 JSX 语法)使用如下命令.

npm install --save-dev @babel/preset-react

好啦，然后我们需要去配置babel 的 presets 了，这里我们按官网的建议，将babel 的配置放在项目根目录下的 .babelrc 文件中（就是之前option 的内容）。

下面是.babelrc 的内容。

{
  "presets": [
    ["@babel/preset-env",{
      useBuiltIns: 'usage'
    }],
    "@babel/preset-react"
  ]
}

下面我们来写react 代码。在写代码前，我们先下载 react ，react-dom

npm install react react-dom --save

下载好后，我们来写index.js 的代码，如下。

import '@babel/polyfill';
import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
  render() {
    return (<p>123456</p>)
  }
}

ReactDom.render(<App />, document.getElementById('root'));

然后，重启服务器就好。 npm run start