Question

我正在尝试将@material/drawer npm软件包手动包含到我的Ember应用程序中。我尝试遵循this guide，但在Chrome开发者控制台中遇到了一些奇怪的错误：

Uncaught SyntaxError: Unexpected token *
Uncaught ReferenceError: define is not defined

第一个来自导入的node_modules/@material/drawer/index.js文件，第二个来自我生成的填充程序。

我的组件代码：

import Component from '@ember/component';
import { MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util } from '@material/drawer';

export default Component.extend({

  init() {
    this._super(...arguments);
    const drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
    document.querySelector('.menu').addEventListener('click', () => drawer.open = true);
  }

});

在我的ember-cli-build.js中：

  app.import('node_modules/@material/drawer/index.js');
  app.import('vendor/shims/@material/drawer.js');

我生成的垫片：

(function() {
  function vendorModule() {
    'use strict';

    return {
      'default': self['@material/drawer'],
      __esModule: true,
    };
  }

  define('@material/drawer', [], vendorModule);
})();

我到底在做什么错？似乎原始ES6代码是导入的，而不是编译到我的JS构建输出中。

我也读过这个SO post，但是答案太多了，我不确定该怎么做。看来this specific answer是我要做的事情，但没有足够的逐字记录。

Answer 1

创建填充程序仅可确保ember-cli获得AMD模块，然后可以将其导入您的应用程序文件中。如果npm软件包之前需要进行构建或编译步骤，则此方法将无效。

您需要一种方法来在ember-cli构建管道中获取软件包构建。幸运的是，有ember-auto-import和ember-cli-cjs-transform这些插件可以为您解决这个问题。

您可能还听说过ember-browserify，它的作用相同，但是不赞成ember-auto-import。

我建议您尝试ember-auto-import：

ember install ember-auto-import

随后，您应该可以尝试导入：

import { MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util } from '@material/drawer';

不需要填充程序或app.import，因为ember-auto-import会为您解决这个问题。

如何将“ @ material / drawer”手动添加到组件中？

1 个答案: