請參閱示例 repo https://github.com/inspiraller/webpack-and-microbundle
微束代碼
mymicrobundle/src/index.js
import React from 'react'
const MyMicroBundle = ({session}) => {
return (
<div>Session = {session}</div>
)
}
export default MyMicroBundle
microbundle/package.json - 用于輸出
{
...
"source": "src/index.js",
"main": "dist/index.umd.js",
"module": "dist/index.module.js",
"exports": "dist/index.modern.js",
"unpkg": "dist/index.umd.js"
}
匯入微束代碼
webpack-loads-microbundle/package.json
{
"dependencies": {
"@mymicrobundle/example": "file:../mymicrobundle",
}
}
webpack-load-microbundle/src/index.tsx
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import MyMicroBundle from '@mymicrobundle/example'
import './index.scss'
const App = () => {
const [session, setSession] = useState('')
return (
<div>
<h1>Hello</h1>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
注意：microbundle 包被捆綁為 javascript，但我使用 typescript 來匯入它。雖然不應該有任何區別。我也在使用 pnpm 而不是 npm 但這也應該沒問題，因為所有其他匯入都可以作業。
我的路徑可能有問題。
錯誤
找不到模塊：錯誤：無法決議“C:\baps\react_all\webpack-and-microbundle\webpack-loads-microbundle\src”中的“@mymicrobundle/example”
uj5u.com熱心網友回復：
webpackprocess.cwd()/node_modules默認從其決議模塊。
所以你的情況是尋找@mymicrobundle/example在webpack-and-microbundle（當前作業目錄），這是你的應用程式目錄。
您需要webpack知道，除了您專案的node_modules.
這可以使用resolve.modules密鑰來完成。請參閱檔案：https : //webpack.js.org/configuration/resolve/#resolvemodules
所以你的 webpack 配置應該是這樣的：
resolve: {
modules: ['node_modules', 'path/to/@mymicrobundle/example'],
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/364718.html
上一篇：我需要撰寫一個自定義Gulp任務來從我的HTML中洗掉屬性
下一篇：我如何修復NPM總是說意外令牌=