使用 ES5 语法访问 Browserify/Babel ES6 模块
Accessing a Browserify/Babel ES6 Module with ES5 Syntax
上下文
我有一个名为 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
!)。
当您使用 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)
上下文
我有一个名为 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
!)。
当您使用 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)