Question

我最近使用模块导入/导出重写了一堆旧的JS到ES2015。我使用Rollup和Babel将其反复传播。

这些图书馆被整合到我无法控制的许多其他网站中，因此我需要对代码保持谨慎，以确保我不会污染全局，不会抛出错误，等

gulpfile.js

var rollupBabel = rollupPluginBabel({
  babelrc: false,
  presets: [
    "babel-preset-es2015-rollup"
  ]
});

merged.add(rollup({
  entry: './js/bnr.js',
  format: "es",
  plugins: [
    rollupBabel
  ]
})
.pipe(source('bnr.js'))
.pipe(gulp.dest('./compiled/js/')));

bnr.js

import * as helpers from "../lib/helpers";
import moment from "../../node_modules/moment/src/moment";

class Connect {

  constructor(window, document) {
    this.init();
  }

  init()
  {
    // Stuff happens here
  }
}

输出

// Helpers and what not here

var hookCallback;

function hooks() {
    return hookCallback.apply(null, arguments);
}

// This is done to register the method called with moment()
// without creating circular dependencies.
function setHookCallback(callback) {
    hookCallback = callback;
}

function isArray(input) {
    return input instanceof Array || Object.prototype.toString.call(input) === '[object Array]';
}

// The rest of moment.js

正如你所看到的那样。在没有闭包/包装器的情况下输出相关代码，以使其远离全局。因此，我在消费网站上遇到了各种各样的错误。

如何导入moment.js或重新配置gulp任务以导入时刻而不会污染全局命名空间？

由于

Answer 1

根据@Bergi的建议，格式是问题，切换到iife将整个事物包装在一个闭包中以解决问题。

ES2015模块导入污染全局命名空间

1 个答案: