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

love丁酥酥

发布于 2020-02-19 10:43:02

2920

发布于 2020-02-19 10:43:02

文章被收录于专栏：coding for love

1. 简介

这一节简单讲述对 React 代码的打包，帮助我们加深理解。如果有需要使用 React 代码的同学可以参考，但是说实话，东西并不多，只是一个简单的入门介绍。另外是一些复习内容，我就不详述了。

2. .babelrc

这里，并非三方组件编写，我们直接使用 preset-env。如下：

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

3. react 部分

安装 react 相关库文件。

npm i react react-dom -S

用 react 编写代码：

// index.js

import React , { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
    render() {
        return <div>Hello world</div>
    }
}

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

image.png

可以看到 webpack 并不识别 react 语法，需要借助 @babel/preset-react 才可以：

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

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

打包后：