如何解决使用 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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。