使用 microbundle 的基本实现不起作用

Question

请参阅示例 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”

Answer 1

webpack 默认从 process.cwd()/node_modules 解析模块。

因此，在您的情况下，它正在webpack-and-microbundle（当前工作目录）中寻找@mymicrobundle/example，这是您的应用程序目录。

你需要让webpack知道，除了你的项目的node_modules之外，它还需要在哪里搜索。

这可以使用resolve.modules 键来完成。参见文档：https://webpack.js.org/configuration/resolve/#resolvemodules

所以你的 webpack 配置应该是这样的：

 resolve: {
    modules: ['node_modules', 'path/to/@mymicrobundle/example'],
  },