JavaScript webpack export 未定义导入的库函数

Question

所以我从 web pack 文档中遵循这个 https://webpack.js.org/guides/author-libraries/，我的文件略有不同。无论我如何尝试这样做，我都会遇到各种问题。

在我的 src/index.js 文件中我有一个简单的函数，例如。

const Dinero = require('dinero.js')



export function calculateGrossRev(hudmonthly){
    // Calculates the yearly gross rev
    const hudonebr = Dinero({amount: hudmonthly, currency: 'USD'})
    .multiply(12);
    return hudonebr.getAmount();
}

在我的 package.json 文件中。

{
  "name": "library",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "dinero": "^1.0.1",
    "lodash": "^4.17.21",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "dinero.js": "^1.9.0"
  }
}

在我的 webpack 配置文件中。

const path = require('path');

module.exports = {
  mode: "development",
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'dinero-calc.js',
    library: {
        name: "dineroNumbers",
        type: "umd",
    },
  },
 };

当我运行 “npm 运行构建”时，我得到了一个大的捆绑文件，对我来说一切都很好。

然后我有一个 index.html 文件，我运行在 VScode 中使用 Live Server。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
</head>
<h1>TEST</h1>
<script src="./dinero-calc.js"></script>
<script>
  console.log(window.dineroNumbers.calculateGrossRev(8200));
</script>
<body>

</body>
</html>

通过文档中的简单示例，我能够从打印到控制台的预期函数中获得预期输出，但是对于我导入的函数，它说

index.html:11 Uncaught TypeError: Cannot read property 'calculateGrossRev' of       undefined at index.html:11

Answer 1

我认为脚本源中有问题 url <script src="./dinero-calc.js"></script>。请检查 index.html 和 dinero-calc.js 的路径。根据您的 script 标签，它们应该位于 dist 文件夹下的同一目录中。

[更新]

首先，安装在src/index.js.

中使用的dinero.js

npm i dinero.js

此外，dinero 应该放在依赖项中，而不是 devDependencies，因为 dinero.js 在您的代码中使用。

二、这样调用函数

Dinero.default({
    amount: hudmonthly,
    currency: "USD",
  }).multiply(12);

JavaScript webpack export 未定义导入的库函数

imported library function not defined from JavaScript webpack export

javascript

commonjs

node.js

ecmascript-6

webpack