freeCodeCamp

5.9 KiB

Raw Blame History

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的一部分。

帮助：有关JSX的更多信息

为了解释这个文件中发生了什么，我们将其分解：

首先，我们导入React和ReactDOM 。这些是用于将代码注入DOM的任何React文件所必需的。 ReactDOM是一个虚拟DOM，它与标准文档对象模型不同。
帮助：有关React DOM的更多信息
- 接下来，我们将创建一个React类。在ES6中将类添加到JavaScript中。因此，这是编写React类的ES6方法，但当然我们也可以在ES5中编写一个。
帮助：有关ES6课程的更多信息

每个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现在令人困惑，请不要担心，只要您了解它的作用。

帮助：有关编写Webpack配置文件的更多信息

5.9 KiB Raw Blame History Unescape Escape

DIST / index.html的

SRC / JS / client.js

webpack.config.js

5.9 KiB

Raw Blame History