如何使用 babel 6 为浏览器构建 react 项目？答案

【问题标题】：How do I build a react project for the browser using babel 6?如何使用 babel 6 为浏览器构建 react 项目？
【发布时间】：2016-06-01 09:48:34
【问题描述】：

我已经设置了一个我正在尝试使用以下命令构建的反应项目：

babel --presets es2015,react --watch src/ --out-dir lib/

哪个起作用并将jsx文件编译成js并将其放在lib/中。

问题在于 babel 会转译如下内容：

import { Form } from "Form"

进入

var _Form = require("Form");

浏览器不知道如何处理，因此我很高兴：

TodosApp.js:3 Uncaught ReferenceError: require is not defined

有人吗？

谢谢

【问题讨论】：

你现在需要研究一个打包器，比如 Webpack 或 Browserify。我个人认为 Webpack 是两者中更强大的。 codementor.io/reactjs/tutorial/…
Pete Hunt（最初的 React 开发人员之一）在此处对如何使用 Webpack 进行了很好的演练：github.com/petehunt/webpack-howto。

【解决方案1】：

Babel 负责将代码转换成浏览器可以理解和运行而不会出现语法错误的东西，但是目前还没有浏览器支持 ES 模块，唯一的选择是将 ES6 代码编译成 CommonJS 或 AMD 模块.

我们有像 Browserify 和 Webpack 这样的工具可以与 CommonJS 一起使用，它是 React 生态系统中的首选格式。这也是 Babel 的默认导出类型。

然后是RequireJS，它适用于 AMD 类型的模块，但您必须使用不同的 Babel plugin 来代替导出 AMD 模块。

一旦您的代码被编译为其中一种格式，您就需要一个模块捆绑器来开始构建依赖关系图，方法是查看您的入口文件并递归地找出它需要哪些其他文件，然后将它们完全连接到一个大文件中可以作为您的应用程序。

它负责定义require 函数以及module 和exports 对象，并将每个模块包装在一个函数中，该函数将在运行时提供它们。

【讨论】：

【解决方案2】：

将 browserify 与 babel 一起使用。这里有一个链接解释how it works

【讨论】：