使用 webpack/react 导入问题

问题描述

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

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

导致编译错误的错误

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

解决方法

导入的正确语法，假设它们在 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。