node.js - Webpack 捆绑但不解析 node_modules 包中的打字稿
问题描述
问题家伙,我已经尝试了我能想到的各种不同的方法来解决这个问题。
我们在一个临时的mono-repo中有两个文件夹(没有 yarn 工作区)。一种称为Mgt-Shared一种称为Server。package.json
我们从 Servers中引用 shared "mgt-shared": "file:../mgt-shared"
,我运行一个简单npm install
的方法来将我们的 shared 放入 Serversnode_modules
中。这两个项目都是混合打字稿和 javascript。当我运行 webpack 以尝试捆绑服务器时,它工作正常,来自 shared 的 Typescript 文件显示在捆绑列表中,但是当我运行时node dist/app.bundle.js
- 它无法解析某些模块(特别是所有 typescript 模块)。当我运行时,webpack --json
我发现了这个(看起来它正在正确解决):
{
"id": "mgt-shared/discounts/discount_reasons",
"identifier": "external \"mgt-shared/discounts/discount_reasons\"",
"name": "external \"mgt-shared/discounts/discount_reasons\"",
"index": 23,
"index2": 15,
"size": 42,
"built": true,
"optional": false,
"prefetched": false,
"chunks": [
"main"
],
...
"failed": false,
"errors": 0,
"warnings": 0,
"assets": [],
"reasons": [
{
"moduleId": "./src/discounts/discount.ts",
"moduleIdentifier": "/home/mygastank/WebstormProjects/mygastank/server/node_modules/babel-loader/lib/index.js!/home/mygastank/WebstormProjects/mygastank/server/src/discounts/discount.ts",
"module": "./src/discounts/discount.ts",
"moduleName": "./src/discounts/discount.ts",
"type": "cjs require",
"userRequest": "mgt-shared/discounts/discount_reasons",
"loc": "20:24-72"
},
{...
],
"providedExports": null,
"optimizationBailout": [],
"depth": 6
},
我的 webpack 配置是这样的:
const nodeExternals = require('webpack-node-externals')
module.exports = {
mode: 'development',
target: 'node',
// This forces resolution of native node modules
externals: [nodeExternals({ modulesFromFile: true })],
entry: './src/index',
output: {
filename: 'app.bundle.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
},
module: {
rules: [
{
// Include ts, tsx, js, and jsx files.
test: /\.(ts|js)?$/,
loader: 'babel-loader',
include: [/node_modules\/mgt-shared/],
exclude: [/node_modules/],
options: {
presets: [
[
'env',
{
'targets': {
'node': 'current'
}
}
],
['@babel/preset-typescript',
{ 'allExtensions': true, 'isTSX': true }]
]
}
}]
}
}
解决方案
我发现有一种方法可以将其他目录列入白名单。
我需要将whitelist
密钥添加到选项中,nodeExternals
如下所示:
externals: [nodeExternals({
whitelist: [/mgt-shared/],
modulesFromFile: true
})],
其他一切都能够保持不变。
推荐阅读
- html - 我可以在系统范围内阻止来自流行网站的 HTML 元素吗?
- c++ - Boost mpl - 为向量中的每个元素附加一个元素
- google-cloud-platform - 将嵌套分区 parquet 文件导入 Big Query 表
- php - PHP 打印机错误
- python - 搁置在关闭前不同步到磁盘
- css - 在同一垂直线上对齐文本和图像
- function - 如何在 Kotlin 中初始化嵌套数据类?
- javascript - 在 StyledSheets 中将水平线移动到中心
- javascript - 如何使用 vue-chart.js 对特定图表使用 chartjs-plugin-datalabels
- pandas - 多列的条件