网站搜索

typescript - 如何在 rollup.js 中将默认导入和具名外部导入都指定为 output.globals?


我找不到如何使用 rollup.js (v1.27.0) 将默认导入和命名导入都指定为 output.globals

我在 HTML 文件中将 apprun.js 作为外部使用。

我的 index.html:

<!doctype html>
<html>
<head>
<script src="https://unpkg.com/[email /dist/apprun.js"></script>
</head>
<body>
<script src="x.js"></script>
</body>
</html>

其中 x.js 是由下面的 x.tsx 用 rollup 编译的:

import app, {Component} from 'apprun'

class Page extends Component {
    view = (s) => <div>Main Page</div>
}
app.render(document.body, <Page />)

无需在本地安装 apprun.js,我只需要将 https://github.com/yysun/apprun/blob/master/apprun.d.ts 下载到与 x.tsx 相同的位置,就可以通过 TypeScript 类型检查器。无论如何,在本地安装 apprun.js 在这种情况下并没有帮助。

我的 rollup.config.js

import typescript from 'rollup-plugin-typescript'
import { terser } from 'rollup-plugin-terser'
const production = !process.env.ROLLUP_WATCH
export default {
    external: ['apprun']
    , input: 'x.tsx'
    , output: {
        file: 'x.js'
        , format: 'iife'
        , globals: {
            apprun: 'app'  // <<-- how to add 'Component' also?
        }
    }
    , plugins: [
        typescript()
        , production && terser()
    ]
}

rollup -c -w 提供 x.js

    var Page = /** @class */ (function (_super) {
        __extends(Page, _super);
        function Page() {
            ...
            return _this;
        }
        return Page;
    }(app.Component));    // <<--- app.Component is undefined, should be Component
    app__default.render(document.body, app__default.createElement(Page, null));
}(app));

在倒数第三行,app.Component 应该只是 Component,如同在 apprun.d.ts 中看到的那样

有关于如何配置 rollup,使得 app 和 Component 可以同时被视为全局变量的建议吗?谢谢!