javascript - 如何在 Javascript 中的单个库中导出多个类？

Question

我在不同的文件中有两个 JS 类，如下所示：

// Class1.js
export default class Class1 { /* ... */ }

// Class2.js
import Class1 from './Class1'
export default class Class2 { /* ... */ }

还有一个index.js同时导出的文件

// index.js
import Class1 from './Class1'
import Class2 from './Class2'

export default {Class1, Class2}

我正在使用 webpack 来捆绑它们

// webpack.config.js
const path = require('path')

module.exports = {
  devtool: 'source-map',
  optimization: {
    runtimeChunk: true
  },
  entry: './src/index.js',
  output: {
    filename: 'my-lib.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'MyLib'
  },
  mode: 'development',
  target: 'node',
}

// package.json
{
  "name": "my-lib",
  "version": "0.1.0",
  "main": "dist/my-lib.js",
  "module": "src/index.js",
  "private": true,
  "scripts": {
    "build": "webpack"
  }
}

但是，当我尝试在单独的项目中使用它们时：

// MyComponent.js
import {Class2} from 'my-lib'

我收到这个警告：

./MyComponent.js 中的警告

“在‘​​my-lib’中找不到导出‘Class2’

为什么？它显然被导出到index.js文件中。我怎样才能解决这个问题？是否有正确的方法可以做到这一点，还是我必须为我需要的每个类创建一个不同的库？

标签： javascriptwebpack