typescript - Module.exports with es6 import for webpack.config.ts in typescript

Question

我将 webpack 与 typescript 一起使用，并在 typescript 中自行配置。使用说明here

在我的根目录中，我有 webpack.config.base.ts

import webpack from "webpack";

const getConfig = ( appDir: string, distDir: string, env: any, args: any ): webpack.Configuration => {
    const config: webpack.Configuration = {
        entry: {

        },
        output: {

        },
        resolve: {
            plugins: [

            ],
            extensions: [".ts", ".tsx", ".js"]
        },
        devtool: "source-map",
        module: {
            rules: [
            ]
        },
        plugins: [
        ]
    };

    return config;
};

module.exports = getConfig;

然后我有两个项目，每个项目都有自己的 webpack.config.ts

import webpack from "webpack";
import * as path from 'path';

const getConfig = require("../../webpack.config.base");

const appDir = __dirname;
const distDir  = path.resolve(__dirname, "../AppOne.Web/wwwroot");

const getConfigFactory = (env: any, args: any): webpack.Configuration => getConfig(appDir, distDir, env, args);

module.exports = getConfigFactory;

这一切都很好。 Here's此工厂 getConfig = () => {} 样式的完整示例。

我的问题是当我试图改变时

const getConfig = require("../../webpack.config.base");

到 es6 导入。这甚至作为 VS 代码的建议提供。

当我应用此更改时，我得到

这是我的 tsconfig.json 我已经启用了 [allowSyntheticDefaultImports][5]。建议here .

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "jsx": "react",
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "typeRoots": [
      "./node_modules/@types/",
      "./types/"
    ],
    "baseUrl": ".",
    "paths": { }
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx"
  ]
}

但我还是添加了 export default getConfig; ...... 并再次 npm run build 。它仍然失败。

const getConfigFactory = (env: any, args: any): webpack.Configuration => getConfig(appDir, distDir, env, args);
                                                                                  ^
TypeError: webpack_config_base_1.default is not a function

我在把头撞到 table 上之前的最后一次尝试是改变

import getConfig from "../../webpack.config.base";

import * as base from "../../webpack.config.base";

删除webpack.config.base.ts中的export default getConfig;，将const getConfig直接导出为export常量获取配置。但此时 module.exports = getConfig 的意义何在？更不用说它也没有血腥的工作(和以前一样的问题)

const getConfigFactory = (env: any, args: any): webpack.Configuration => base.getConfig(appDir, distDir, env, args);
                                                                              ^
TypeError: base.getConfig is not a function

我在这里错过了什么？为什么我不能简单地将 const getConfig = require("../../webpack.config.base"); 替换为 import getConfig from "../../webpack.配置.base"

附言。

这是我的 “脚本” 用于运行它

    "build:appone": "webpack --mode=development --config ./src/AppOne.App/webpack.config.ts",
    "build:apptwo": "webpack --mode=development --config ./src/AppTwo.App/webpack.config.ts",

Answer 1

什么起作用了？

我为多个环境(例如 development 和 production)配置了带有 TypeScript 的 webpack 和一个通用的基本配置。为此，我利用:

• Node.js(版本 11.12.0)
• TypeScript(版本 3.5.3)
• webpack(版本 4.39.1)

目录结构

假设目录结构如下:

project/
├── ...
├── webpack.common.ts
├── webpack.development.ts
└── webpack.production.ts

其他目录结构(例如您的示例中的两个嵌套项目)也可以使用。不过，您可能必须调整以下示例中使用的路径。

TypeScript 配置

webpack 的基本配置，webpack.common.ts ，看起来如下:

import webpack from 'webpack';

const configuration: webpack.Configuration = {
  // Your common webpack configuration...
};

export default configuration;

针对不同环境的两个 webpack 配置使用 npm package webpack-merge 扩展了这个基本配置.您可以在 npm package @types/webpack-merge 中找到它的 TypeScript 类型.为了坚持最初的例子，development 的 webpack 配置环境看起来如下:

import webpack from 'webpack';
import merge from 'webpack-merge';
import commonWebpackConfiguration from './webpack.common';

const configuration: webpack.Configuration = merge(commonWebpackConfiguration, {
  mode: 'development'
  // Your `development`-specific configuration...
});

export default configuration;

与此同时，production 的 webpack 配置环境与用于 development 的环境没有什么不同环境方面import/export语法。

import/export

您可能已经注意到，我使用 ES6 import/export语法:

export default configuration;

和

import commonWebpackConfiguration from './webpack.common';

因此，不存在用于导入和导出的 CommonJS 语法(例如 module.exports 或 require )，这可以保持 webpack 配置文件的清洁并允许无缝的工作流程。根据 webpack's documentation，这实际上是使用 webpack 和 TypeScript 的推荐方式.

---

为什么您的配置不有效？

第一次尝试

My problem is when I try to change

const getConfig = require("../../webpack.config.base");

to an es6 import. This is even provided as a suggestion by VS code.

module.exports正如您观察到的错误所述，确实没有默认导出(即对象 module.exports 没有任何名为 default 的属性)。
使用 ES6 默认导出(即 export default )实际上创建了一个命名 default 的导出就像其他命名导出一样(例如下面的 bar)。这可以通过编译以下 TypeScript 片段来说明:

const helloWorld = () => {
  console.log('Hello, world!');
};
const bar = 'foo';

export default helloWorld;
export { bar };

使用 tsc 到 JavaScript :

"use strict";
exports.__esModule = true;
var helloWorld = function () {
    console.log('Hello, world!');
};
var bar = 'foo';
exports.bar = bar;
exports["default"] = helloWorld;

第二次尝试

But I added export default getConfig; anyway... and npm run build again. It still fails.

在这种情况下，添加 allowSyntheticDefaultImports (你已经拥有)和 esModuleInterop (你想念的)到你的 TypeScript 配置 tsconfig.json都设置为 true会解决这个问题 ¹ .

第三次尝试

My final attempt before smashing my head into the table was to change

import getConfig from "../../webpack.config.base";

to

import * as base from "../../webpack.config.base";

Delete the export default getConfig; in the webpack.config.base.ts and export the const getConfig directly as export const getConfig. But at that point what's the point of module.exports = getConfig.

拥有

export const getConfig = () => {...};

和

module.exports = getConfig;

同时会给你base === getConfig (因为只有 module.exports = getConfig; 生效)。因此，调用 base.getConfig给出 undefined因为你定义的函数 getConfig没有属性(property)getConfig .因此，“base.getConfig 不是函数”。

导入语法互操作性

Why can't I simply replace const getConfig = require("../../webpack.config.base"); with import getConfig from "../../webpack.config.base"?

const getConfig = require("../../webpack.config.base");

是 CommonJS 导入而

import getConfig from "../../webpack.config.base";

是 ES6 导入。它们不能互换使用，因为它们本质上是不同的。您应该选择使用其中之一，但不能同时选择两者。