Ecmascript 6 使用browserify从es6传输到es5时如何避免模块的全局变量
我正在用browserify和babel将es6转换为es5,如下所示:Ecmascript 6 使用browserify从es6传输到es5时如何避免模块的全局变量,ecmascript-6,browserify,commonjs,babeljs,es6-modules,Ecmascript 6,Browserify,Commonjs,Babeljs,Es6 Modules,我正在用browserify和babel将es6转换为es5,如下所示: concat: { options: { sourceMap: false }, dist: { src: ["Scripts/app/another.js", "Scripts/app/employee.js"], dest: "Scripts/app/b
concat: {
options: {
sourceMap: false
},
dist: {
src: ["Scripts/app/another.js", "Scripts/app/employee.js"],
dest: "Scripts/app/built.js"
}
},
browserify: {
dist: {
options: {
transform: [
["babelify", { "presets": ["es2015"] }]]
},
files: {
"Scripts/app/expParser.js": "Scripts/app/built.js"
}
}
}
在my employeeModule.js中:
export const n=10;
在my employee.js中:
import {d} from "./employeeModule.js";
console.log(d) //10
现在的问题是,当我在另一个文件中调用console.log(d)时,即使我没有执行“导入”,另一个.js:
console.log(d) //10
我提到我将employee.js和另一个.js连接在一起,以便在浏览器中加载此文件时进行单个调用。这两个文件都是IIFEs。
如何防止访问另一个.js文件中的“d”值
编译后的代码如下所示:
var_employeeModule=require(“./employeeModule”)代码>
并且对所有函数都是全局的。我确信您不需要concat
任务。
Browserify为您提供所有必要的服务。您只需要编写导入
例如,您可以删除concat
任务,然后在builded.js
中只保留这两行:
import './another.js';
import './employee.js';
构建之后,您会发现您的expParser.js
正在执行这两个模块,并且每个模块的外部变量都不可见。无需手动将模块包装到IIFE中。
我想这已经接近你的需要了
p.S.请不要忘记下次使用grunt
。谢谢!很抱歉没有提到我正在使用grunt!