Question

我正在尝试将模块用作项目中的外部库。这是我库的代码：

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

这是我图书馆的package.json：

  "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'

为什么解构不起作用？这是我的项目的webpack配置：

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

Answer 1

此语法import { symbol } from 'library'用于导入非默认导出，而此语法import someNamespace from 'my-library'用于导入默认导出，因为您的模块仅具有默认导出，您必须使用第二种语法正确地抓取它，这就是为什么第一次导入返回undefined

的原因

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

export const test = 'Hello there'

然后第一次导入将使console.log()打印Hello there，而第二次导入将抛出错误，因为您的模块缺少默认导出

如何使用webpack将模块用作项目中的外部库？

1 个答案: