使用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

此文件的輸出很大（JavaScript大於20,000行）； 但是，它似乎將ExternalComponent包裹在較大的IIFE中（對此可能是錯誤的）。

問題

我的目標是從純ES5上下文訪問類ExternalComponent （在我的開發環境中，我無法使用ES6）。 我假設這將涉及以下之一：

1. 在ExternalComponent.react.jsx ，以某種方式將ExternalComponent添加到全局名稱空間 ，以便在將其編譯為ES5時僅用其名稱引用ExternalComponent 。
2. 使用ES5語法my-external-component-in-ES5.js某種方式訪問​​埋在龐大的my-external-component-in-ES5.js的ExternalComponent類。

我不確定如何執行（1）或（2）。

注意：如果有人想知道為什么要這樣做，那是因為我正在嘗試在ClojureScript中使用ExternalComponent （它只具有ES5 javascript互操作；因此，我必須弄清楚如何僅使用ES5語法來訪問ExternalComponent ！） 。

Answer 1

使用Browserify將ES6模塊編譯為ES5時，它將import語法轉換為CommonJS調用。

這個：

import foo from './foobar';

成為：

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

您可以完全按照期望從ES5文件訪問和使用您的類，而無需破壞全局名稱空間。 只需使用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作為全局變量公開。

將其編譯到resources/public/js/compiled/bundled-deps.js ，然后使用腳本標簽將其添加到index.html （在cljs構建之上）。

然后，您將可以通過JS名稱空間引用您的JS模塊。

(def external-component js/ExternalComponent)