使用 webpack/react 导入问题答案

【问题标题】：Importing problems with webpack/react使用 webpack/react 导入问题
【发布时间】：2021-01-20 01:29:49
【问题描述】：

我正在尝试在 React 项目中为 ScrollMagic 导入名为 debug.addIndicators 的模块。这当然意味着我必须使用 es6 所以我添加到我的

import "../node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js";

导致编译错误的错误

[错误：ENOENT：没有这样的文件或目录，stat '/home/david/.steampath'] { errno：-2，代码：'ENOENT'，系统调用： 'stat'，路径：'/home/david/.steampath' }

【问题讨论】：

GreenSock 不推荐使用 ScrollMagic。相反，我们推荐官方滚动插件：ScrollTrigger！各方面都更好。

标签： javascript reactjs webpack scrollmagic

【解决方案1】：

导入的正确语法是，假设它们在 node_modules 中并且包是正确构建和发布的，是

import identifier from 'package-name'

当您不需要标识符时，要导入具有副作用的东西，如本例：

import 'package-name'

要导入一个命名的导出，它会是

import { foo } from 'package-name'

请注意，在所有这些情况下，模块名称都是字符串，在这些情况下，您都不能在命名导出的对象上导入属性，因为点不是标识符的可接受部分。这就是其他两个答案有 SyntaxErrors 的原因。要获得该项目，您可以这样做：

import { foo } from 'package-name'
const { bar } = foo

对于 ScrollMagic，这意味着

// import the default export from the package
import ScrollMagic from 'scrollmagic'
// import the plugin you want
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'

之所以可行，是因为包名解析为 node_modules 中的某个位置，然后解析为该模块的 package.json 中 main 或 module 字段中指定的任何内容。

还有一个特定于 React 的版本，您可以使用 npm i react-scrollmagic 获取并使用导入

import { Controller, Scene } from 'react-scrollmagic'

此包装器还包含您尝试导入的插件。

或者，正如对您问题的评论中提到的，您可以使用推荐的库 ScrollTrigger。

【讨论】：

我按照您的方式完成了导入插件，但仍然无法正常工作。
它在什么方面不起作用 - 是有错误，还是发生了其他事情？我刚刚用最少的配置做了一个准系统测试，它导入得很好。
React 不会编译它并给出我在帖子中所述的错误。但是，删除该导入可以修复它，所以我很困惑。