使用 browserify 从 es6 转换为 es5 时如何避免模块的全局变量

Question

我正在使用 browserify 和 babel 将 es6 转换为 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) 时，即使我没有执行“import”，another.js:

console.log(d) //10

我提到我正在串联：employee.js 和 another.js 一起以在浏览器中加载此文件时进行一次调用。这两个文件都是 IIFE。如何防止访问 another.js 文件中的 "d" 值？

编译后的代码是这样的： var _employeeModule = require("./employeeModule"); 并且对所有函数都是全局的。

Answer 1

我确定您不需要 concat 任务。 Browserify 为您做所有必要的 concatenation and module isolation。您只需要编写导入即可。

例如，您可以删除 concat 任务，然后在您的 built.js:

中只保留这两行

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

构建后，您会发现 expParser.js 执行这两个模块时，每个模块都带有从外部不可见的变量。无需手动将模块包装到 IIFE 中。我想这很接近您的需求。

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

使用 browserify 从 es6 转换为 es5 时如何避免模块的全局变量

How to avoid global variable for modules when transpiling from es6 to es5 with browserify

commonjs

browserify

ecmascript-6

babeljs

es6-modules