包中定义的 MeteorJS javascript 函数未定义

Question

我在 Meteor 中创建了一个自定义包，将 javascript 添加到应用程序中。

我的package.js:

Package.describe({
    name: 'markel:theme',
    version: '1.0.0',
    summary: 'Theme package',
});

Package.onUse(function(api) {
    // Import all JS files required by the template

    api.addFiles(['assets/js/custom.js']);
});

在custom.js中：

function theme_test() {
    console.log('Theme test');
}

当 meteor 在应用程序中加载包时，它会将函数放在 IIFE 中。所以 javascript 在 (function(){here}) 中。所以我的函数将 return undefined.

如何定义和使用该函数？

Answer 1

我希望这些选项之一可以解决您的问题，因为我发现很难重现任何 undefined 值。

选项 1 - 使用模块

虽然您可以通过 api.addFiles 自动添加文件，但您仍然可以选择显式导出它们：

package.js

Package.describe({
    summary: 'Theming',
    version: '1.0.0',
    name: 'marcelweidum:theme',
    git: 'https://github.com/MarcelWeidum/stack-question.git'
});

Package.onUse((api) => {
    api.use('ecmascript') // required to use import/export
    api.addFiles([
        'js/custom.js'
    ], 'client');
    api.mainModule('main.js')
});

package/js/custom.js

export const theme_test = function theme_test () {
    console.log('Here am I!');
}

console.log('Loaded');

package/main.js（在包的根文件夹中）

export { theme_test } from './js/custom'

client/main.js

import { theme_test } from 'meteor/marcelweidum:theme'
theme_test()

会在控制台给你：

Loaded
Here am I! 

选项 2 - 使用 api.export

您可以使用隐式全局导出主题，使用 api.export:

可以立即访问该主题

package.js Package.describe({ 摘要：'Theming'， 版本：'1.0.0'， 姓名：'marcelweidum:theme', git: 'https://github.com/MarcelWeidum/stack-question.git' });

Package.onUse((api) => { api.addFiles([ 'js/custom.js' ], 'client'); api.export('MyTheme') });

*package/js/custom.js*

函数theme_test(){ console.log('Here am I!'); }

我的主题 = 我的主题 || {} MyTheme.theme_test = theme_test

console.log('Loaded');

*client/main.js*
```javascript
MyTheme.theme_test()

会在控制台给你：

Loaded
Here am I! 

选项 3 - 显式导入文件

这将仅在导入时悬停加载文件内容

package.js Package.describe({ 摘要：'Theming'， 版本：'1.0.0'， 姓名：'marcelweidum:theme', git: 'https://github.com/MarcelWeidum/stack-question.git' })

Package.onUse((api) => { api.use('ecmascript') })

*js/custom.js* (in root folder of the package)
```javascript
export const theme_test = function theme_test () {
    console.log('Here am I!');
}

console.log('Loaded');

package/js/custom.js

export const theme_test = function theme_test () {
    console.log('Here am I!');
}

console.log('Loaded');

client/main.js

import { theme_test } from 'meteor/marcelweidum:theme/js/custom'
theme_test()

会在控制台给你：

Loaded
Here am I! 

选项 4 使用 bare 选项，以防文件被编译器插件使用：

如果您不想将文件包裹在闭包中，例如因为自定义编译器插件将使用它，则添加 bare 选项：

Package.describe({
    summary: 'Theming',
    version: '1.0.0',
    name: 'marcelweidum:theme',
    git: 'https://github.com/MarcelWeidum/stack-question.git'
});

Package.onUse((api) => {
    api.addFiles([
        'js/custom.js'
    ], 'client',  { bare: true });
});

这仍会加载文件，但您必须使用 isobuild 插件来处理文件。