正确构建和导入自定义库答案

【问题标题】：Correctly build and import a custom library正确构建和导入自定义库
【发布时间】：2019-01-28 16:24:01
【问题描述】：

我正在构建我自己的在项目之间使用的有用函数库。为此，我决定创建一个私有 NPM 包@name/package。

当我尝试在我的CRA 应用程序中导入它时，问题就出现了。服务器编译正确（在 CLI 中），但在访问页面时它给了我Unhandled Rejection (TypeError): Object(...) is not a function 错误。我使用 babel 进行编译，使用下面的配置。

Babel 配置

{
    presets: ["@babel/env", "@babel/react"]
}

Package.json

{
  "main": "./dist/index.js",
  "module": "./src/index.js",
  "files": [
    "src/**/*",
    "dist/**/*"
  ],
}

src/index.js

export { default as mapObject} from "./mapObject";

src/mapObject.js

export default function mapObject(object, callback) {
    return Object.keys(object || {}).map(key => callback(key, object[key]));
}

dist/index.js（babel编译）

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

Object.defineProperty(exports, "mapObject", {
  enumerable: true,
  get: function get() {
    return _mapObject.default;
  }
});

var _mapObject = _interopRequireDefault(require("./mapObject"));

dist/mapObject.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = mapObject;

function mapObject(object, callback) {
  return Object.keys(object || {}).map(function (key) {
    return callback(key, object[key]);
  });
}

导入文件

// Causes error when loading in the browser
import { mapObject } from "@name/package";
import { mapObject } from "@name/package/src";
import { mapObject } from "@name/package/dist";

// Doesn't cause an error
import mapObject from "@name/package/dist/mapObject";
import mapObject from "@name/package/src/mapObject";

我检查了多个其他库，对我而言，构建/导入过程没有区别。

【问题讨论】：

标签： javascript npm babeljs

【解决方案1】：

所以上面显示的代码实际上是正确的，但是我在测试时搞砸了，没有复制新的 src 和 dist 文件夹...

【讨论】：