5.9 KiB
title | localeTitle |
---|---|
Writing Code for Your Es6 React with Webpack Project | 使用Webpack项目为Es6 React编写代码 |
DIST / index.html的
我们现在可以打开我们的dist/index.html
。这将是加载整个应用程序的一个HTML页面。对于这个文件,我们根本不需要太多代码,只需要:
- 在
src/js/client.js
为React DOM设置一个元素。 - 链接到我们的捆绑JavaScript文件(尚不存在)。
因此,这就是我们的dist/index.html
文件的样子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Webpack Example</title>
</head>
<body>
<!-- React app will be injected into the following `div` element: -->
<div id="app"></div>
<!-- Include bundled JavaScript: -->
<script src="bundle.js"></script>
</body>
</html>
你可能想知道为什么这个页面链接到bundle.js
,到目前为止我们所有的都是空的src/js/client.js
。稍后我们编写Webpack配置文件时会显示这一点。
SRC / JS / client.js
现在是时候编写一些React代码了。就像在dist/index.html
文件中一样,现在我们将编写足够的代码来启动应用程序,因此根本不需要太多代码:
import React from 'react';
import ReactDOM from 'react-dom';
class Main extends React.Component {
render() {
return (
<div>
<h1>This is one cool app!</h1>
</div>
);
}
}
const app = document.getElementById('app');
ReactDOM.render(<Main />, app);
看起来像HTML元素的代码实际上是JSX,它是React的一部分。
为了解释这个文件中发生了什么,我们将其分解:
-
首先,我们导入
React
和ReactDOM
。这些是用于将代码注入DOM的任何React文件所必需的。ReactDOM
是一个虚拟DOM,它与标准文档对象模型不同。 -
- 接下来,我们将创建一个React类。在ES6中将类添加到JavaScript中。因此,这是编写React类的ES6方法,但当然我们也可以在ES5中编写一个 。
每个React类都有一个render
方法。在这种情况下, render
方法return
一个JSX div
元素。这是我们将在任何React文件中看到的内容。该类可以包含必须出现在render
方法之前的其他方法,它始终位于类的底部。
- 最后,我们将React与
index.html
联。我们将app
设置为我们希望注入React代码的位置。最后,使用ReactDOM,我们将我们编写的组件<Main />
注入到app中,在这种情况下是app
的id
为div
。
webpack.config.js
在我们的项目准备好之前,还有一个文件要写。这是Webpack配置文件。起初, webpack.config.js
文件可能会令人困惑,但通常情况下,它们并不像看起来那么复杂。
在这种情况下,最基本的是, webpack.config.js
导出一个具有以下属性的对象:
财产 | 角色 |
---|---|
进入 | 内容:应用程序的切入点。在这种情况下,它是src/js/client.js 。 |
输出 | 出现了什么:Webpack将为我们捆绑什么。在这种情况下,它是我们在webpack.config.js 命名的任何webpack.config.js 。 |
装载机 | Webpack将要执行的任务。 |
以下是webpack.config.js
文件的样子:
var path = require('path');
var srcPath = path.join(__dirname, 'src');
var buildPath = path.join(__dirname, 'dist');
module.exports = {
context: srcPath,
entry: path.join(srcPath, 'js', 'client.js'),
output: {
path: buildPath,
filename: "bundle.js"
},
module: {
loaders: <a href='https://en.wikipedia.org/wiki/Don%27t_repeat_yourself' target='_blank' rel='nofollow'>
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
再次,让我们分解它,以便清楚这个文件在做什么:
-
首先,我们需要NodeJS的
path
模块,以便我们可以处理文件路径,这是设置对象context
所必需的。使用此模块非常重要,而不是尝试使用字符串连接目录,因为某些操作系统(如Windows)需要这样做。 -
然后,我们使用我们刚才需要的
path
模块指定srcPath
和buildPath
。这样做可以确保我们有[DRY,可读代码。 -
现在是时候写这个对象了。我们将要使用的属性都与Webpack相关。
- 我们首先提供一个上下文,它只是指定我们的应用程序的位置。它指的是我们刚刚创建的
context
变量。 - 然后我们指定入口点,这当然是我们之前写的React应用程序(
src/js/client.js
)。 - 接下来,我们指定Webpack在运行时创建的捆绑文件的名称。在这种情况下,它是
dist/bundle.js
。听起来有点熟?它应该这样做,因为这是我们从dist/index.html
链接到的文件! - 最后是
module
属性,它包含一个数组,loaders
,当前包含一个对象。此对象的属性告诉Webpack使用ES6和React编写哪些JavaScript文件,以便在运行webpack.config.js
时,其加载程序babel
可以相应地运行。这主要是样板代码,我们可以在Babel Loader的自述页面上看到。
- 我们首先提供一个上下文,它只是指定我们的应用程序的位置。它指的是我们刚刚创建的
如果webpack.config.js
现在令人困惑,请不要担心,只要您了解它的作用。