Ember Fastboot / 不要导入 node_modules 脚本答案

【问题标题】：Ember Fastboot / don't import node_modules ScriptEmber Fastboot / 不要导入 node_modules 脚本
【发布时间】：2018-09-24 12:55:54
【问题描述】：

我首先要指出我是从这里发帖的：https://github.com/ember-fastboot/ember-cli-fastboot/issues/621 到目前为止，这个问题还没有引起任何关注，所以我正在向更广泛的社区开放它。

我正在尝试使 ember-cli-slick 快速启动兼容。它使用来自 node_modules 的 slick.js，如下所示：

included: function(app) {
this._super.included(app);

app.import("node_modules/slick-carousel/slick/slick.js");

我正在尝试让 treeforvendor 工作，但运气不佳。我正在关注这里的文档https://www.ember-fastboot.com/docs/addon-author-guide#third-party-dependencies 但我怀疑它的目标是 bower 而不是 npm/node_modules。

treeForVendor(defaultTree) {        
    var browserVendorLib = new Funnel('node_modules/slick-carousel/slick/slick.js');    

    browserVendorLib = map(browserVendorLib, (content) => `if (typeof FastBoot === 'undefined') { ${content} }`);

    return new mergeTrees([defaultTree, browserVendorLib]);
  },

这会导致错误：

构建错误（broccoli-persistent-filter:Mapper）

ENOTDIR：不是目录，scandir 'projectdir/tmp/broccoli_persistent_filtermapper-input_base_path-FOInixjr.tmp/'

我也试过

  treeForVendor(defaultTree) {        
    var map = require("broccoli-stew").map;
    var Funnel = require("broccoli-funnel");
    const mergeTrees = require('broccoli-merge-trees');

    let tree=new Funnel('node_modules/slick-carousel/slick/', {
      destDir: 'slick-carousel',
      files: ['slick.js']
    })

    tree = map(tree, (content) => `if (typeof FastBoot === 'undefined') { ${content} }`);


    return new mergeTrees([defaultTree, tree]);
  },

这至少可以构建.. 但是我又回到了 Fastboot 错误

ReferenceError: jQuery 未定义在 projectfolder/tmp/broccoli_merge_trees-output_path-8cGO0zCl.tmp/assets/node_modules/slick-carousel/slick/slick.js:25:1

我创建了一个干净且空的 Ember 插件项目，其中仅包含 import 和 treeforvendor 函数来演示该问题 https://github.com/MrChriZ/ember-slicker

【问题讨论】：

slick.js 需要 jQuery，所以你可能只是在 fastboot 中禁用了你的插件。

标签： ember.js

【解决方案1】：

有几件事我错过了，也许插件指南可以更清楚。

我认为首先漏斗需要一个目录路径而不是完整的文件路径。除此之外，路径必须是完整的文件路径。快速启动插件指南中并没有立即明确这一点。
所以这看起来像这样：

const assetDir = path.join(this.project.root, 'node_modules', 'slick-carousel', 'slick');
       var browserVendorLib = new Funnel(assetDir, {
         files: ['slick.js'],
         destDir: 'slick'
       });

你不能做的是

const assetDir = path.join(this.project.root, 'node_modules', 'slick-carousel', 'slick', 'slick.js);
var browserVendorLib = new Funnel(assetDir);

这会引发：

ENOTDIR：不是目录

我相信是因为漏斗需要一个目录路径而不是文件路径。

其次，在包含的钩子中，Gaurav 在 Github 上正确指出需要将导入语句更改为指向供应商目录。

所以我的最终解决方案是：

treeForVendor(defaultTree) {        
   var map = require("broccoli-stew").map;
   var Funnel = require("broccoli-funnel");
   const mergeTrees = require('broccoli-merge-trees');

   const assetDir = path.join(this.project.root, 'node_modules', 'slick-carousel', 'slick');
   var browserVendorLib = new Funnel(assetDir, {
     files: ['slick.js'],
     destDir: 'slick'
   });    

   browserVendorLib = map(browserVendorLib, (content) => `if (typeof FastBoot === 'undefined') { ${content} }`);

   return new mergeTrees([defaultTree, browserVendorLib]);
 },
 included: function(app) {
   this._super.included(app);

   app.import('node_modules' + '/slick-carousel/slick/slick.css');
   app.import('node_modules'+ '/slick-carousel/slick/slick-theme.css');
   app.import('node_modules' + '/slick-carousel/slick/fonts/slick.ttf', { destDir: 'assets/fonts' });
   app.import('node_modules' + '/slick-carousel/slick/fonts/slick.svg', { destDir: 'assets/fonts' });
   app.import('node_modules' + '/slick-carousel/slick/fonts/slick.eot', { destDir: 'assets/fonts' });
   app.import('node_modules' + '/slick-carousel/slick/fonts/slick.woff', { destDir: 'assets/fonts' });
   app.import('node_modules' + '/slick-carousel/slick/ajax-loader.gif', { destDir: 'assets' });

   // import the above library into vendor.js that was merged with the vendor trees. In browser the library will be eval'd and run
   // In fastboot, the library will not be eval'd
   app.import('vendor/slick/slick.js');
 }

【讨论】：