如何避免模块的全局变量从ES6 transpiling与browserify

Question

我transpilling ES6与browserify和巴贝尔这样对ES5 ES5到时：

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" 
       } 
      } 
     } 

在我employeeModule.js：

export const n=10; 

在我employee.js：

import {d} from "./employeeModule.js"; 
console.log(d) //10 

而现在的问题，当我打电话时的console.log（d）在另一个文件前夜ñ虽然我没有做一个“进口”，another.js：

console.log(d) //10 

我提到我串联：employee.js和another.js在一起，使一个单一的呼叫时加载该文件浏览器。这两个文件都是IIFE。 如何防止访问另一个.js文件中的“d”值？

编译的代码是这样的： var _employeeModule = require("./employeeModule"); 并且是全局的所有功能。

Answer 1

我相信你不需要concat任务。 Browserify为你做了所有必要的concatenation和module isolation。所有你需要的是写入进口。

例如，您可以删除concat任务，然后只留下这两行您built.js：

import './another.js'; 
import './employee.js'; 

构建后，你会发现你的expParser.js与不可见的变量执行这两个模块的从外面为他们每个人。没有任何手动将模块包装到IIFE中。 我想这是接近你的需求。

P.S.请不要忘记提及您下次使用grunt。