如何使链接组件 peerDepdencies 使用链接到的脚本的等效 node_modules? [英] How to make a linked component peerDepdencies use the equivalent node_modules of the script being linked to?

问题描述

• 我正在使用 npm 版本 3(版本相关，因为 peerDependencies 在版本 3 中的新行为).
• 我有一个 reactjs 应用，名为game" 和一个名为播放器"的 reactjs 组件.
• 我正在使用 webpack-dev-server 来运行游戏"应用.
• react 和 react-dom 是 game app 和 playerpeerDependencies 的依赖/code> 组件.

我想将 player 组件链接到 game 应用程序.

我已经完成了:

cd/playernpm 链接光盘/游戏npm 链接播放器

当我运行 webpack-dev-server 程序时，我收到以下错误消息:

哈希:09968e7401389f50049f版本:webpack 1.12.2时间:339ms块{0} app.js, 0.14192ce06d8b6f8abb91.hot-update.js, app.css (app) 2.32 MB+ 576 个隐藏模块../player/index.js 中的错误找不到模块:错误:无法解析/player 中的模块反应"@ ../player/index.js 21:13-29

如何让 player 组件使用 game ./node_modules 作为 peerDependences?

解决方案

经过一番挖掘，我在 webpack 文档中找到了解决方案:npm linked 模块没有找到它们的依赖项.>

只需将 resolve.fallback(和 resolveLoader.fallback，如果您的依赖项具有加载器特定的逻辑，例如使用 CSS 模块)到您的 webpack 配置:

解决:{回退: path.resolve(__dirname, './node_modules')},解析加载器:{回退: path.resolve(__dirname, './node_modules')}

fallback 设置将使 webpack 加载器查找本地 ./node_modules 路径以查找任何无法解析的依赖项，包括主应用程序的依赖项的依赖项本身.因此，主应用程序依赖项的所有 peerDependencies 将针对主应用程序 ./node_modules 进行解析.

• I am using npm version 3 (version relevant because of the new way peerDependencies behave in version 3).
• I have a reactjs app called "game" and a reactjs component called "player".
• I am using webpack-dev-server to run "game" app.
• react and react-dom are dependencies of game app and peerDependencies of the player component.

I would like to link player component to game app.

I have done:

cd /player
npm link
cd /game
npm link player

When I run webpack-dev-server program, I get the following error message:

Hash: 09968e7401389f50049f
Version: webpack 1.12.2
Time: 339ms
chunk    {0} app.js, 0.14192ce06d8b6f8abb91.hot-update.js, app.css (app) 2.32 MB
     + 576 hidden modules

ERROR in ../player/index.js
Module not found: Error: Cannot resolve module 'react' in /player
 @ ../player/index.js 21:13-29

How do I make player component to use game ./node_modules for the peerDependences?

解决方案

After a bit of digging, I have found a solution in the webpack documentation: npm linked modules doesn’t find their dependencies.

Simply add resolve.fallback (and resolveLoader.fallback if your dependencies have loader specific logic, such as using CSS Modules) to your webpack config:

resolve: {
    fallback: path.resolve(__dirname, './node_modules')
},
resolveLoader: {
    fallback: path.resolve(__dirname, './node_modules')
}

The fallback setting will make webpack loader look into the local ./node_modules path for any dependencies that cannot be resolved, including the dependencies of the dependencies of the main app itself. As a result, all peerDependencies of the main app dependencies will be resolved against the main app ./node_modules.

这篇关于如何使链接组件 peerDepdencies 使用链接到的脚本的等效 node_modules?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！