在TypeScript中使用webpack.config.ts的es6 import进行Module.exports

时间:2019-06-04 18:46:50

标签: typescript webpack import

我正在将webpack与typescript一起使用,并且将其自身配置为typescript。说明here

在我的根目录中,我有<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"> <div class="parent"> <div class="child"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

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

一切正常。 Here's是这种工厂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 = () => {}

到es6导入。 VS代码甚至提供了建议。

enter image description here

应用此更改后,我得到

enter image description here

这是我的const getConfig = require("../../webpack.config.base"); ,我已经启用了tsconfig.json。建议here

[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");

PS。

这是我的import getConfig from "../../webpack.config.base",用于运行此程序

"scripts"

1 个答案:

答案 0 :(得分:2)

什么工作?

我为 webpack TypeScript 配置了多个具有通用基本配置的环境(例如developmentproduction)。为此,我利用:

  • 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 / development语法而言,import环境的webpack配置与export环境所使用的webpack配置没有区别。

进出口

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

export default configuration;

import commonWebpackConfiguration from './webpack.common';

因此,所涉及的导入和导出(例如module.exportsrequire)没有 CommonJS 语法,可以使webpack配置文件保持整洁并允许无缝的工作流程。实际上,这是根据webpack's documentation使用webpack和TypeScript的推荐方法。


为什么您的配置有效?

第一次尝试

  

我的问题是当我尝试更改时

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

导入es6。 VS代码甚至提供了建议。

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;

第二次尝试

  

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

在这种情况下,将allowSyntheticDefaultImports(您已经拥有)和esModuleInterop(您错过了)添加到都设置为tsconfig.json的TypeScript配置true中可以解决问题 1

第三次尝试

  

在把头砸向桌子之前,我最后的尝试是改变

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 导入。由于它们本质上不同,因此不能互换使用。您应该选择使用其中之一,但不能同时使用。