这里我们不用 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