2017-07-25 76 views
1

我最近使用模块导入/导出重写了一堆旧JS到ES2015。我正在使用Rollup和Babel来回传。ES2015模块导入污染全局命名空间

该库被集成到许多其他的网站,我没有这么控制我需要的代码谨慎,以确保我不污染全局,不会引发错误等

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相关的代码将被输出没有闭合/包装,以保持它的全球性的。因此,我在消费网站上收到各种错误。

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

感谢

+0

这看起来像一个commonsjs模块或暗含模块范围的东西 - 它们不是全局变量。尝试使用UMD作为输出格式。 – Bergi

回答

1

正如@Bergi提出的格式是问题,切换到iife包装在封闭整个事情来解决这个问题。