ES6 和 Webpack：导入不起作用答案

【问题标题】：ES6 & Webpack: import not workingES6 和 Webpack：导入不起作用
【发布时间】：2018-07-04 13:10:15
【问题描述】：

我目前正在学习 ES6 和 Webpack，并且我有一组特定的文件，import 语句无法处理。问题来了：

Sagas.js

import { deleteMe } from './DeleteMe';
import * as constants from '../Constants';

debugger;

DeleteMe.js

export const deleteMe = "Yep, it's loading";
console.log(deleteMe);

在上述文件中，deleteMe 无法从调试器（使用 Chrome Inspector）访问。 constants 是。

和 Constants.js

export const SET_COMMENTS = 'SET_COMMENTS';

在调试器停止之前（在 Chrome 检查器中），“是的，它正在加载”确实在控制台中触发，因此文件本身正在通过。

我试过了：

import * as deleteMeStuff from ./DeleteMe 以查看 deleteMeStuff 是否会填充。它没有
重新启动 webpack-dev-server。没有骰子，编译时没有错误。在 ./DeleteMe 中输入 debugger 可确认更改正在发生。
const deleteMe = "Yep, it's working"; export default deleteMe & import deleteMe from './DeleteMe' --> 还是不开心

在调试器中，我刚刚注意到 _DeleteMe 返回 {deleteMe: "Yep, it's loading", __esModule: true}

知道这里发生了什么以及如何解决它吗？我彻底糊涂了。在我的应用程序的其他文件中，还有大量其他导入文件可以成功运行。

【问题讨论】：

FWIW，你的导出和导入都很好（假设 Webpack 没有文件扩展名是可以的）。如果我在没有 Webpack 的情况下直接在 Chrome（现在它具有模块支持）中执行此操作并添加文件扩展名，则导入的 deleteMe 存在。所以这是一个 Webpack 配置问题，我猜。
const deleteMe = "Yep, it's loading"; export { deleteMe }; 然后import { deleteMe } from './DeleteMe';
一个想法：在 Sagas.js 中除了您展示的内容之外，还有其他内容吗？ Webpack 可能会摇树并看到您不使用deleteMe，因此无需费心导入它。
deleteMe is not accessible from debugger 是什么意思？我假设代码是由 babel 转译的，因此常量名称可能会更改为其他名称，甚至替换为遵循 ES2015 模块行为的表达式(0, _ModuleName.deleteMe)
@TJ 摇树是个好主意，但是将 console.log(deleteMe) 扔到 Sagas.js 中就可以了（？？？）。然而下一行的调试器仍然找不到deleteMe。 @Yury 诚然，我是 ES6/Babel/Webpack 的新手——这听起来很可行。有没有办法在 Chrome 检查器中追踪更改的常量名称？此外，这些更改的名称不会显示在 Chrome Inspector --> 来源中吗？（他们显示为deleteMe）

【解决方案1】：

你不能像

一样在同一行使用 default 和 const

export default const deleteMe = "Yep, it's working"

你必须像这样打破它：

export const deleteMe = "Yep, it's loading";
export default deleteMe;

要导入它，您可以执行以下任一操作：

import deleteMe  from './DeleteMe';

或

import  { deleteMe }  from './DeleteMe';

【讨论】：

感谢 vijay 的建议。第 3 个要点中列出的 default 参数只是一个尝试追踪问题的实验，可以确认当 default 参数分成两行时它仍然具有相同的行为。我已经编辑了上面的第三个要点以澄清。问题行为仍然存在。
这个答案有一些错误的语法。首先，当您导入未使用 default 关键字导出的任何内容时，您必须包含 {}。如果使用default关键字导出，则可以不使用{}直接导入。此外，您不必先执行export const deleteMe = "Yep, it's loading";，然后再执行export default deleteMe;。在const deleteMe 定义后，您可以在一个export 关键字中导出它。没问题，你在 JS 领域继续前进就会得到它！