使用 ES5 语法访问 Browserify/Babel ES6 模块

Question

上下文

我有一个名为 ExternalComponent.react.jsx 的 ES6/react-js 文件，其结构如下：

    import React from 'react'
    import Swipeable from 'react-swipeable'

    const ExternalComponent = React.createClass({
        //...
    })

    export default ExternalComponent

我已经使用 browserify/babel 使用以下命令将此文件编译成它的 ES5 版本（新的 ES5 文件称为 my-external-component-in-ES5.js）：

browserify -t babelify --presets react MyExternalComponent.react.jsx -o my-external-component-in-ES5.js

此文件的输出相当大（>20,000 行 javascript）；然而，它似乎将 ExternalComponent 包裹在一个大的 IIFE 中（这可能是错误的）。

问题

我的目标是从纯 ES5 上下文访问 class ExternalComponent（在我的开发环境中，我无法使用 ES6）。我假设这将涉及以下其中一项：

在 ExternalComponent.react.jsx 中，以某种方式将 ExternalComponent 添加到 全局命名空间 ，这样当它编译为 ES5 时我可以只引用 ExternalComponent 名字。
使用 ES5 语法以某种方式访问隐藏在大量 my-external-component-in-ES5.js 中的 ExternalComponent class。

我不知道如何做 (1) 或 (2)。

注意：如果有人想知道我为什么要这样做，那是因为我正在尝试在 ClojureScript 中使用 ExternalComponent（它只有 ES5 javascript 互操作；因此我必须弄清楚如何仅使用 ES5 语法来访问 ExternalComponent！）。

Answer 1

当您使用 Browserify 将 ES6 模块编译为 ES5 时，它会将 import 语法转换为 CommonJS 调用。

这个：

import foo from './foobar';

变为：

var foo = require('./foobar');

您可以完全按照您对 ES5 文件的期望访问和使用您的 class，无需破坏全局命名空间。只需使用 CommonJS 函数即可。

var ExternalComponent = require('./my-external-component-in-ES5');

ReactDOM.render
  <ExternalComponent />,
  document.getElementById('app')
);

如果您尝试从 ClojureScript 执行此操作，那么我建议创建一个独立的 browserify 构建，以使用全局变量公开您的模块。您可以使用像 browserify-umdify.

这样的工具

// external-component.js
export default ExternalComponent

这将被编译为 Javascript 文件，该文件将 externalComponent 作为 window 对象上的全局变量公开。

将其编译到 resources/public/js/compiled/bundled-deps.js 之类的地方，然后使用脚本标记（在 cljs 构建之上）将其添加到 index.html。

然后您将能够通过 JS 命名空间引用您的 JS 模块。

(def external-component js/ExternalComponent)

使用 ES5 语法访问 Browserify/Babel ES6 模块

Accessing a Browserify/Babel ES6 Module with ES5 Syntax

reactjs

ecmascript-6

browserify

babeljs

clojurescript

上下文

问题