Webpack 如何使用我的模块作为我的项目中的外部库与网页？

我试图在我的项目中将我的模块用作外部库。 以下是我的库的代码：

// src/index.js
export default {
    test: 'Hello there'
}

  "main": "dist/index.js",
  "module": "src/index.js",

这是我的库的

package.json

：

// src/index.js
export default {
    test: 'Hello there'
}

  "main": "dist/index.js",
  "module": "src/index.js",

这就是我在项目中导入它的方式：

import { test } from 'my-library'
import external from 'my-library'

console.log(test) // logs undefined
console.log(external.test) // logs 'Hello there'

module: {
        rules: [
            {
                test: /\.js$/,
                // exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/react'],
                    plugins: ['transform-class-properties']
                }
            },
        ]
}

为什么解构不起作用？ 以下是我的项目的网页配置：

import { test } from 'my-library'
import external from 'my-library'

console.log(test) // logs undefined
console.log(external.test) // logs 'Hello there'

module: {
        rules: [
            {
                test: /\.js$/,
                // exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/react'],
                    plugins: ['transform-class-properties']
                }
            },
        ]
}

---

此语法

import{symbol}from'library'

用于导入非默认导出，而此语法

import someNamespace from'my library'

用于导入默认导出，并且由于您的模块只有默认导出，因此您必须使用第二个语法来正确获取它，这就是为什么第一次导入返回未定义的

如果您将模块的内容更改为以下内容

export const test = 'Hello there'

然后第一次导入将使
控制台.log（）
打印
Hello here
，而第二次导入将抛出一个错误，因为您的模块缺少默认导出