如何避免模塊的全局變量從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。