Question

我正在开发一个需要同时在node和react app中使用的库。我使用了一个生成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"

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

1 个答案: