Question

上下文

我有一个名为compile "name.antonsmirnov.fs:fs:+"的ES6 / react-js文件，其结构如下：

* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugCompile'.
   > Could not resolve name.antonsmirnov.fs:fs:+.
     Required by:
         Ad_gradle:app:unspecified
      > inconsistent module metadata found. Descriptor: name.antonsmirnov.fs:fs:1.2 Errors: bad version: expected='1.1' found='1.2'

我使用browserify / babel使用以下命令将此文件编译为其ES5版本（新的ES5文件称为ExternalComponent.react.jsx）：

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

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

    export default ExternalComponent

此文件的输出非常大（大约20,000行的javascript）;但是，它似乎将my-external-component-in-ES5.js包裹在一个大的IIFE中（可能是错误的）。

问题

我的目标是从纯ES5上下文访问类browserify -t babelify --presets react MyExternalComponent.react.jsx -o my-external-component-in-ES5.js（在我的开发环境中，我无法使用ES6）。我假设这将涉及以下之一：

在ExternalComponent内，以某种方式将ExternalComponent添加到全局命名空间，这样当它编译为ES5时，我可以通过其名称引用ExternalComponent.react.jsx。
以某种方式使用ES5语法访问隐藏在大量ExternalComponent中的ExternalComponent类。

我不确定如何做（1）或（2）。

注意：如果有人想知道我为什么要这样做，那是因为我试图在ClojureScript中使用ExternalComponent（只有ES5 javascript互操作;因此我必须弄清楚如何使用仅 ES5语法访问my-external-component-in-ES5.js。）。

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之类的地方，然后使用脚本标记（在cljs构建之上）将其添加到index.html。

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

(def external-component js/ExternalComponent)

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

上下文

问题

1 个答案: