javascript - 如何在 Webpack 4 项目中导入自定义 UMD 模块

Question

我正在开发一个需要在节点和 react 应用程序中工作的库。我使用生成 UMD 模块的 webpack 4 项目，但是当我尝试将它导入到一个简单的 webpack 项目中时出现问题。

当我使用 import lib from 'myLib'; lib 是未定义的

这是我的库的样子

export const printMsg = function() {
  return "This is a message from the lib";
};

有了这个webpack配置

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "mylib.js",
    library: "mylib",
    libraryTarget: "umd",
    umdNamedDefine: true,
    globalObject: `(typeof self !== 'undefined' ? self : this)`
  }
};

现在我正在使用样板项目 ( https://github.com/wbkd/webpack-starter ) 进行测试。

我使用 npm install --save mylib 添加它，我的 dist 代码在我的 node_modules 文件夹中。我的 index.js 文件如下所示:

import "../styles/index.scss";
import lib from "watson-tile-lib";
console.log(lib);

当我运行该页面时，我的浏览器控制台中出现了 undefined。

有什么想法吗？

Answer 1

您在 package.json 中的主要字段是什么？它应该是这样的构建目标:

main: "dist/mylib.js"