前言
随着前端技术的发展，ES6 语法已经成为了我们开发中必不可少的一部分，然而还有很多浏览器并不支持 ES6 语法，这时候我们就需要使用 Babel 将 ES6 转译为 ES5 以兼容这些浏览器，而在打包多个 ES6 模块文件时，我们可能会遇到 Duplicate declaration 的错误。
本文将详细介绍这个问题的原因、解决方法以及示例代码。
问题原因
在 ES6 中，声明变量一般使用 let 或 const，而这两个关键字是不支持重复声明的。当我们使用 Babel 打包多个 ES6 模块文件时，如果这些文件中有相同的变量名，则 Babel 会识别出这个错误并提示 Duplicate declaration。
具体来说，问题发生在当多个模块（例如 a.js 和 b.js）都引入了同名的变量（例如 let name = 'xxx'）时，当我们使用 Webpack 或其他打包工具进行打包时，打包工具会将这些模块合并成一个单独的文件（例如 bundle.js）。这时候，打包工具会对这些模块中的变量名进行检查。由于这些模块代码被合并为一个文件，因此所有这些模块中的同名变量都会存在于同一个作用域中，这就导致了重复声明的问题。
解决方法
方法一：使用 IIFE 将模块封装起来
一种解决方法是使用 IIFE（Immediately Invoked Function Expression）将模块封装起来，这样每个模块中的变量都处于独立的作用域中，避免了重复声明的问题。示例代码如下：
//a.js
(function () {
let name = 'xxx';
// ...
}());//b.js
(function () {
let name = 'yyy';
// ...
}());方法二：使用 Module 的特性来解决
ES6 为我们提供了基于模块的编程方式，我们可以使用 import 和 export 关键字对变量、函数、类等进行导入和导出。这样，在打包工具将多个模块合并为一个文件时，这些被导出的变量都会在不同的作用域中进行管理，避免了重复声明的问题。
示例代码如下：
//a.js export let name = 'xxx'; // ...
//b.js export let name = 'yyy'; // ...
//main.js
import { name as name1 } from './a.js';
import { name as name2 } from './b.js';
console.log(name1, name2); // 输出：xxx yyy结论
在打包多个 ES6 模块文件时，由于重复命名变量会导致 Duplicate declaration 的错误。我们可以使用 IIFE 或使用模块的特性来解决这个问题。
尽管第一种方法相对没有新手友好，但是对于一些后端工程师或者对于 Module 的使用不太熟悉的前端工程师，IIFE 这种方法可能是更符合常规的解决办法。而相对于第一种方法，使用 Module 特性会更为方便，且不会有太多的副作用，一个稍加了解的前端工程师就应该掌握这个方法来提高开发效率。
最后，希望本文能够帮助到大家，让我们可以在使用 Babel 打包多个 ES6 模块文件时更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efa2146fbf9601973041f5