ES6解构赋值：export default与import的微妙问题

"这篇文章除了探讨ES6的`export default`和`import`语句中的解构赋值，还涉及到了Babel对`export default`的处理以及在不同项目构建工具中可能遇到的问题。" 在ES6中，`export default`用于导出默认模块，这意味着一个模块只能有一个默认导出，而可以有多个命名导出。当我们使用`import`语句时，可以以不同的方式导入这些导出。 例如，假设我们有一个`config.js`文件，其中包含一个配置对象： ```javascript // config.js export default { host: 'localhost', port: 80 }; ``` 在另一个文件，如`app.js`中，我们可以这样导入并使用这个配置对象： ```javascript // app.js import config from './config'; console.log(config.host); // => 'localhost' ``` 然而，当尝试使用解构赋值来直接导入配置对象的属性时，会有不同的行为： ```javascript // app.js import { host } from './config'; // 这里是错误的用法 console.log(host); // => undefined ``` 在这个例子中，`import { host }`尝试从导出的对象中直接解构`host`属性，但因为`config.js`使用`export default`，实际上并没有导出一个名为`host`的对象属性，而是导出了整个配置对象。因此，`import { host }`会找不到`host`属性，导致`undefined`。 正确的解构赋值方法是先导入整个配置对象，然后再进行解构： ```javascript // app.js import config from './config'; let { host } = config; console.log(host); // => 'localhost' ``` 这个问题可能与项目使用的构建工具，如Webpack和Babel有关。Babel在转换ES6代码时，对待`export default`的处理方式可能会影响到解构赋值。某些情况下，Babel可能没有正确地处理这种导入，特别是在使用不同项目初始化工具（如antd-init、vue-cli和create-react-app）时，配置可能会有所不同。 文章中提到，作者在某些项目中使用以下代码时没有问题： ```javascript // app.js import { host } from './config'; console.log(host); // 在某些项目中正常工作 ``` 这可能是由于这些项目的配置或所依赖的Babel版本处理`export default`和解构赋值的方式不同。为了确保跨项目的一致性，开发者需要了解他们所使用的构建工具和转换库的具体行为，并根据需要调整配置。 理解`export default`和`import`语句以及它们与解构赋值的交互对于编写可维护的ES6模块非常重要。在使用解构赋值时，务必确保正确导入了模块，特别是当模块使用`export default`时。同时，注意不同构建工具和转换库可能带来的差异，以便在项目中避免潜在的问题。