正确地 babel 在 ember-cli-build 中使用额外的树转译一个文件

Question

我的项目中有一些文件，我想将其移出正常的应用程序树，并仅在某些情况下加载。目前我使用 broccoli-stew 移动文件并使用 broccoli-babel-transpiler 转译目标文件。但是，当我这样做时，我最终会在导入的文件上得到一个额外的 default 对象。

此代码被添加到顶部

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _Ember = _interopRequireDefault(_ember);

这导致我不得不在编写源文件时引用 ember 作为 Ember["default"].Object 等。希望源文件中没有任何奇怪的引用，这使得其他人更难开发者理解。

这是我当前的 ember-cli-build.js 文件

/* global require, module */
var stew = require('broccoli-stew');
var esTranspiler = require('broccoli-babel-transpiler');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    storeConfigInMeta: false
  });

  var additionalTrees = [];
  var appTree = app.appAndDependencies();

  if (EmberApp.env() !== "production") {
    var jQuery = stew.find(appTree, "bower_components/jquery/dist/jquery.min.js");
    jQuery = stew.mv(jQuery, "bower_components/jquery/dist/jquery.min.js", "assets/jquery.js");

    additionalTrees.push(jQuery);
  }

  function extractRouter(fileName) {
    var router = stew.find(appTree, 'mobile-web/'+ fileName + '.js');
    router = esTranspiler(router, {
      modules: "amd",
      moduleIds: true,
      moduleId: "mobile-web/router"
    });
    router = stew.mv(router, 'mobile-web/'+ fileName + '.js', 'assets/'+ fileName + '.js');
    additionalTrees.push(router);
  }

  extractRouter('router');
  extractRouter('secure-router');

  return app.toTree(additionalTrees);
};

Answer 1

尝试配置您的 esTranspiler 以使用 modules: "amdStrict":

router = esTranspiler(router, {
  modules: "amdStrict",// here
  moduleIds: true,
  moduleId: "mobile-web/router"
});

它与 docs. The amdScrict exists in the source code here 中描述的 "commonStrict" 相似。

正确地 babel 在 ember-cli-build 中使用额外的树转译一个文件

Properly babel transpile a file in ember-cli-build withing additional tree

ember.js

ecmascript-6

ember-cli

broccolijs

babeljs