Webpack_（第三章）_实现对React框架代码的打包

Dear 丶 2023-06-24 06:25 1阅读 0赞

配置React代码的打包  
react代码是一套非常先进的前端框架代码，我们如果想写react的代码，如何进行react代码的打包呢？

在babel 的官网上的preset配置项，执行`npm install --sava--dev @babel/preset-react`  
如果想对react代码打包的话，可以借助babel的preset-react，帮助我们解析react中的语法，使用她我们就可以在项目中编写react的语法结构了

安装react框架  
在项目中执行 `npm install react react-dom -D` 来安装react框架对应的内容

import '@babel/polyfill';
    
    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'))

react代码的含义是：使用react框架创建了一个组件，这个组件会在页面上渲染出div中 HelloWorld这样的内容，ReactDOM会将这个组件挂载到页面上html id为root的DOM节点上，这个节点上就会展示出HelloWorld的内容  
运行项目，项目会报错，无法识别语法的内容，所以我们使用webpack结合babel直接打包是不行的，如果想用webpack结合babel打包react框架代码，需要使用`npm install --sava--dev @babel/preset-react`，并在babelrc中做配置

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

babel在做打包的时候，转换一下react的语法，preset中的语法转换是有顺序的，会先执行preset-react转换react语法，之后再去执行preset-env，也就是从下往上的执行顺序，从右往左的执行顺序。  
重新运行项目，就可以看到react语法可以正常运行了。  
![在这里插入图片描述][20191221115232458.png]

**加粗样式**

[20191221115232458.png]: https://img-blog.csdnimg.cn/20191221115232458.png