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

我正在开发一个需要在节点和 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

有什么想法吗?

最佳答案

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

main: "dist/mylib.js"

https://stackoverflow.com/questions/56446060/

相关文章:

spring-cloud - Spring Cloud Gateway 阻止路由发现请求

android - Xamarin 安卓 : Cannot resolve GoogleSignIn

r - 如何更改 R 包的默认库路径

python-3.x - 如何在 Visual Studio Code 中使用 activate.b

ionic-framework - LocalStorage 中设置的键值可供其他应用程序访问

csv - 在 Java 中解析大型 CSV 文件的最快最有效的方法

sql-server - 连接到 SharePoint 服务器的 SQL 服务器

reactjs - JWT LocalStorage 与 Cookie

amazon-web-services - 对于不支持发件人 ID 的国家/地区,AWS SNS S

logging - 如何为 KTOR 添加日志拦截器?