Простая библиотека с babel, typescript и webpack - TypeError: (...) не является функцией; на Объекте. <anonymous>

Question

Итак, 3 дня go У меня возникла странная проблема с объединением простой функции с babel, typescript и webpack.

Весь пример «неработающего» доступен по адресу https://codesandbox.io/s/zen-wright-y3vql. Вам просто нужно скачать npm/yarn install, npm/yarn run build и node test-run.js.

У меня всего несколько простых файлов.

• src / index.ts

export const sum = (a: number, b: number) => a + b;

• пакет. json

{
  "name": "babel-test",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "dev": "webpack",
    "build": "NODE_ENV=production webpack"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-typescript": "^7.10.4",
    "@types/node": "^14.0.23",
    "@types/webpack": "^4.41.21",
    "babel-loader": "^8.1.0",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

• .babelr c

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

• tsconfig . json

{
  "compilerOptions": {
    "module": "commonjs",
    "jsx": "preserve",
    "esModuleInterop": true,
    "sourceMap": true,
    "allowJs": true,
    "lib": [
      "es6",
      "dom"
    ],
    "rootDir": "src",
    "moduleResolution": "node"
  }
}

• webpack.config.ts

import path from "path";
import webpack from "webpack";

const isProduction = process.env.NODE_ENV === "production";
const isDevelopment = !isProduction;

const config: webpack.Configuration = {
  mode: isProduction ? "production" : "development",
  entry: "./src/index.ts",
  watch: isDevelopment,

  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist/"),
  },

  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        exclude: [/node_modules/],
        loader: "babel-loader",
      },
    ],
  }
};

export default config;

• тестовый запуск. js

const sum = require("./dist/index.js");

console.log(sum);
sum(1, 2);

И после сборки с webpack или npm run build и запуска с node test-run.js у меня есть эта ошибка:

/Users/sigo/Downloads/hife9/test-run.js:4
sum(1, 2);
^

TypeError: sum is not a function
    at Object.<anonymous> (/Users/sigo/Downloads/hife9/test-run.js:4:1)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

Я пробовал трюки с core-js и transform runtime/regenerator вещей без результата.

Answer 1

У вас есть sum как именованный экспорт , но вы импортируете его, как если бы это был экспорт по умолчанию .

Прочтите о различиях в MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export.

Он должен быть импортирован следующим образом:

const { sum } = require("./dist/index.js");

console.log(sum);
sum(1, 2);

Вот обновленный CodeSandbox для демонстрации: https://codesandbox.io/s/serene-gould-1xnw7

(Я внес другие изменения в ваш CodeSandbox, так как он не работает как есть.)