Javascript ES2015模块导入全局命名空间
我最近利用模块导入/导出将一堆旧的JS重写为ES2015。我正在使用Rollup和Babel将此文件传输回 这些库集成到许多我无法控制的其他站点中,因此我需要谨慎使用代码,以确保不会污染全局,不会抛出错误等 gulpfile.jsJavascript ES2015模块导入全局命名空间,javascript,ecmascript-6,Javascript,Ecmascript 6,我最近利用模块导入/导出将一堆旧的JS重写为ES2015。我正在使用Rollup和Babel将此文件传输回 这些库集成到许多我无法控制的其他站点中,因此我需要谨慎使用代码,以确保不会污染全局,不会抛出错误等 gulpfile.js var rollupBabel = rollupPluginBabel({ babelrc: false, presets: [ "babel-preset-es2015-rollup" ] }); merged.add(rollup({ e
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/')));
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
}
}
bnr.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/')));
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
正如您所看到的,与.js相关的所有代码都是在没有闭包/包装器的情况下输出的,以防止其进入全局。因此,我在消费网站上遇到了各种各样的错误
如何导入moment.js或将gulp任务重新配置为导入moment而不污染全局命名空间
谢谢正如@Bergi所建议的,格式就是问题所在,切换到
iLife
将整个事情包装在一个闭包中以解决问题 这看起来像是一个CommonJS模块或具有隐含模块作用域的东西——它们不应该是全局变量。尝试使用UMD作为输出格式。