javascript - ES6 和 Webpack : import not working

标签 javascript reactjs webpack ecmascript-6

我目前正在学习 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);

在上述文件中,无法从调试器(使用 Chrome Inspector)访问 deleteMe常量是。

和 Constants.js

export const SET_COMMENTS = 'SET_COMMENTS';

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

我已经尝试过:

  • 从 ./DeleteMe 导入 * as deleteMeStuff 以查看 deleteMeStuff 是否会填充。事实并非如此
  • 正在重新启动 webpack-dev-server。没有骰子,编译时没有错误。在 ./DeleteMe 中抛出一个调试器以确认更改正在通过。
  • const deleteMe = "是的,它正在工作";导出默认deleteMe & 从'./DeleteMe'导入deleteMe --> 仍然不高兴

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

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

最佳答案

您不能像

那样在同一行中使用 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';

关于javascript - ES6 和 Webpack : import not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48440276/

相关文章:

javascript - 将 setInterval 和回调传递给新变量

javascript - 如何在 Redux 中访问另一个 reducer 的状态

javascript - Angular 11 与 Webpack 5 - 向 IE11 用户显示消息

javascript - ReactJs 如何在初始渲染后重新调用 API?

webpack - 如何在加载程序中获取入口文件名?

javascript - 通过 Laravel Mix 导入和使用节点模块的正确方法

javascript - 如何比较具有不同字段的 2 个不同对象,并使用告诉共同元素的新字段创建一个新对象

javascript - 如果我从 Windows 复制到 Mac,我的代码会运行吗

javascript - 如何使用图像源数组更改 JavaScript 中的图像

reactjs - 如何设计 React-Icons 样式