ES6和Webpack：import无法工作

Question

ES6和Webpack：import无法工作

3

我目前正在学习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检查器中），控制台会触发“Yep，it's loading”，因此文件本身已经通过。

我尝试了：

- 通过 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}。

你知道这里发生了什么并且如何解决吗？我非常困惑。我的应用程序中的其他文件成功地使用了很多其他导入文件。

- PlankTon

就此而言，您的导出和导入是正确的（假设Webpack不介意没有文件扩展名）。如果我直接在Chrome中执行此操作（现在它支持模块），而不使用Webpack并添加文件扩展名，则导入的“deleteMe”将存在。因此，我猜这是一个Webpack配置问题。 - T.J. Crowder

const deleteMe = "Yep, it's loading"; export { deleteMe }; then import { deleteMe } from './DeleteMe'; - connexo

一个想法：Sagas.js 中除了你展示的内容之外还有什么？Webpack 可能会进行摇树优化，看到你没有使用deleteMe，就不会导入它了。 - T.J. Crowder

2

“deleteMe is not accessible from debugger”是什么意思？我猜测这段代码是通过babel转译的，所以常量名称可能被更改为其他内容，甚至被替换为表达式，以遵循ES2015模块的行为（(0, _ModuleName.deleteMe)）。 - Yury Tarabanko

1

@TJ Tree shaking 是一个好主意，但是在 Sagas.js 中插入一个 console.log(deleteMe) 也可以正常工作(???)。然而，在下一行调试器仍然找不到 deleteMe。 @Yury 承认我的 ES6/Babel/Webpack 知识有限 - 这听起来是可行的。在 Chrome 检查器中是否有追踪更改的常量名称的方法？此外，那些更改的名称是否会显示在 Chrome 检查器->源中？（它们显示为 deleteMe） - PlankTon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vijay22uk · Answer 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';