与ES6进口为打字稿webpack.config.ts Module.exports(Module.

我使用的是打字稿的WebPack与配置其自身打字稿。 说明这里

在我的根我有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;

这一切工作绝对没问题。 这里的这个工厂的一个完整的例子getConfig = () => {}风格。

我的问题是，当我尝试改改

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

到ES6进口。 这甚至是由VS代码的建议提供。

当我申请这个变化我得到

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

{
  "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

我砸我的头到表之前的最后一次尝试是改变

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

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

删除export default getConfig; 在webpack.config.base.ts和导出const getConfig直接作为export const getConfig 。 但是，在这一点上有什么点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.config.base"

PS。

这里是我的"scripts"运行这个

    "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:

是什么工作？

我配置的WebPack与打字稿多个环境（例如development和production ）用共基极结构。 要做到这一点，我利用：

• Node.js的 （版本11.12.0 ）
• 打字稿 （版本3.5.3 ）
• 的WebPack（版本4.39.1 ）

目录结构

假设目录结构如下：

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

其他目录结构（如两个嵌套的项目，在你的例子），也能发挥作用。 虽然，你可能不得不适应在下面的例子中使用的路径。

打字稿配置

的的WebPack，基本配置webpack.common.ts ，如下所示：

import webpack from 'webpack';

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

export default configuration;

针对不同的环境两个的WebPack配置延伸使用此基本配置NPM包webpack-merge 。 你可以找到它的打字稿分型在NPM包@types/webpack-merge 。 要坚持最初的例子，为的的WebPack配置development环境，如下所示：

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;

同时，针对该配置的WebPack production环境，是用于对一个没有什么不同development来讲环境import / export语法。

进出口

正如你可能已经注意到，我使用ES6 import / export语法：

export default configuration;

和

import commonWebpackConfiguration from './webpack.common';

因此，对于进口和出口没有CommonJS的语法（如module.exports或require ）参与其保持的WebPack配置文件干净，允许无缝的工作流程。 这实际上是用的WebPack和打字稿按照工作的建议方式的WebPack的文档 。

---

为什么你的配置不工作？

第一次尝试

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

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

到ES6进口。 这甚至是由VS代码的建议提供。

module.exports确实没有一个默认的出口（即对象module.exports没有任何属性命名default ）的错误，您观察指出。
使用ES6默认出口（即export default ）实际上创建了一个名为出口default就像其他命名出口（如bar在下面）。 这可以说明编译如下打字稿片段：

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

export default helloWorld;
export { bar };

对JavaScript的使用tsc ：

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

第二次尝试

但是我说export default getConfig; 反正...和npm run build一次。 它仍然失败。

在这种情况下，加入allowSyntheticDefaultImports （你已经拥有）和esModuleInterop （你想念）你的打字稿配置tsconfig.json都设置为true将弥补这一问题¹ 。

第三次尝试

我砸我的头到表之前的最后一次尝试是改变

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

至

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

删除export default getConfig; 在webpack.config.base.ts和导出const getConfig直接作为export const getConfig 。 但是，在这一点上有什么点module.exports = getConfig 。

有

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

和

module.exports = getConfig;

在同一时间，也会给你base === getConfig （如仅module.exports = getConfig;生效）。 因此，呼吁base.getConfig给出undefined ，因为你定义的函数getConfig不具有财产getConfig 。 因此，“ base.getConfig不是一个函数”。

导入语法互操作性

为什么我不能简单地替代const getConfig = require("../../webpack.config.base"); 与import getConfig from "../../webpack.config.base" ？

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

是CommonJS的进口，而

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

是一个ES6进口。 因为它们是本质上的不同，他们不能互换使用。 你应该选择其中的一个，但不能同时在同一时间工作。

文章来源: Module.exports with es6 import for webpack.config.ts in typescript