如何在 Webpack 4 項目中導入自定義 UMD 模塊

Question

我正在開發一個需要在節點和反應應用程序中工作的庫。 我使用了一個生成 UMD 模塊的 webpack 4 項目，但是當我嘗試將它導入到一個簡單的 webpack 項目中時出現問題。

當我使用import lib from 'myLib'; lib 未定義

這就是我的 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"