我正在将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代码甚至提供了建议。
应用此更改后,我得到
这是我的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"
答案 0 :(得分:2)
我为 webpack 和 TypeScript 配置了多个具有通用基本配置的环境(例如development
和production
)。为此,我利用:
11.12.0
)3.5.3
)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 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.exports
或require
)没有 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 导入。由于它们本质上不同,因此不能互换使用。您应该选择使用其中之一,但不能同时使用。