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

Question

请查看示例回购 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"
}

正在导入 Microbundle 代码

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，但这应该没问题，因为所有其他导入都可以工作。

可能是我的路径有问题。

错误

Module not found: Error: Can't resolve '@mymicrobundle/example' in 'C:\baps\react_all\webpack-and-microbundle\webpack-loads-microbundle\src'

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'],
  },

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

Basic implementation of using microbundle not working

reactjs

npm

webpack

pnpm

microbundle

微捆绑码

正在导入 Microbundle 代码