Question

我有一个需要下划线的模块：

import _ from "underscore"

var numbers = [1, 4, 6, 7, 9, 3, 22, 11, 54, 99, 100];
var evens = _.filter(numbers, x => x % 2 === 0);

document.getElementById('output').innerText = evens;

这在我的gulp任务中运行良好：

gulp.task('process-scripts', function(cb) {
    var builder = new Builder('Scripts', 'Scripts/config.js');
    builder.buildStatic('main.js', 'app/main.min.js', { minify: true });
    cb();
});

使用此脚本标记：

<script src="/app/main.min.js"></script>

问题是，我想将下划线放入它自己的脚本中。所以我把我的gulp任务改为：

gulp.task('process-scripts', function(cb) {
    var builder = new Builder('Scripts', 'Scripts/config.js');
    builder.buildStatic('underscore', 'app/vendor.min.js', { minify: true });
    builder.buildStatic('main.js - underscore', 'app/main.min.js', { minify: true, globalDeps: {underscore: '_'} });
    cb();
});

这样做，我将下划线拉出主捆绑并放入供应商捆绑包中。在main.min.js的底部，bundle创建了这段代码：

(function(factory) {
  factory(_);
});

我收到错误：“未捕获的ReferenceError：_未定义”

我使用jQuery代替下划线尝试了同样的事情，它运行得很好。单步执行代码时我注意到，当调用main底部的代码时，在窗口对象上找到了$，因此没有错误。

如何让主模块识别供应商脚本中的下划线？

Answer 1

如果为npm创建自执行包：下划线_不会添加到窗口对象。因此，您的主模块既不能通过import _ from 'underscore'也不能通过window._访问它。

如果你想将你的应用程序捆绑在不同的模块中，你应该使用builder.bundle（）来创建捆绑包，而不是自动执行捆绑包。这样您就必须使用system.js来加载脚本，但是您将能够访问应用程序模块中的下划线包。

例如：

System.import('app/vendor').then(() => {
   System.import('app/main');
});

用jspm

1 个答案: