typescript - 强制 Webpack 4 仅导入 cjs 而从不使用打字稿 esm
问题描述
应用程序建立在webpack@4.43.0
; 打字稿 4.2.4;
尝试@reduxjs/toolkit
在应用程序上安装和使用会产生构建错误:
ERROR in ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js
Module not found: Error: Can't resolve 'immer' in './node_modules/@reduxjs/toolkit/dist'
如何禁用从库 package.json 的“模块”路径导入 esm 模块并在 webpack 中仅使用“主”入口点?
package.json 的@reduxjs/toolkit
"main": "dist/index.js",
"module": "dist/redux-toolkit.esm.js",
"unpkg": "dist/redux-toolkit.umd.min.js",
"types": "dist/index.d.ts",
我们的配置: tsconfig.json
"target": "es6",
"jsx": "react",
"module": "commonjs",
"lib": [
"es6",
"dom",
"esnext",
"esnext.asynciterable"
],
"strict": true,
"sourceMap": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
webpack.config.js
const HappyPackConfig = new HappyPack({
id: 'ts',
threads: 2,
loaders: [
{
path: 'ts-loader',
query: { happyPackMode: true },
options: {
transpileOnly: true,
},
},
],
});
module.exports = {
node: {
net: 'mock',
},
entry: ['whatwg-fetch', './src/index.tsx'],
output: {
path: path.resolve('dist'),
filename: '[name].bundle.[contenthash].js',
publicPath: '/',
globalObject: 'this',
},
devtool: process.env.NODE_ENV === 'development' ? 'inline-source-map' : false,
devServer: {
https: true,
historyApiFallback: true,
watchOptions: {
ignored: /node_modules/,
},
},
optimization: { ... },
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /\/node_modules/,
use: { loader: 'happypack/loader?id=ts' },
},
],
},
};
package.json不包含"type": "module"
,我们没有使用babel
解决方案
在我的情况下,添加以下参数会有所webpack.config.js
帮助:
module.exports = {
/* ... */
resolve: {
/* ... */
mainFields: ['browser', 'main'],
},
};
推荐阅读
- android - FingerprintManager.isHardwareDetected() 仅在 Android Oreo 上崩溃
- sql-server - 在过程中的 SQL 语句中使用数字
- javascript - 如何使用js在html中添加n个输入字段
- java - 断言语句后的 ArrayIndexOutOfBoundsException
- javascript - Thymeleaf 没有从动态创建 html 元素的 html 向控制器发送对象?
- jquery - 如何使用间隔更改文本
- r - R上的库存管理计算
- python - 一次将一个元素添加到多个列表中python
- c# - Asp.net core 2.1 单元测试自动映射器?
- python - Python3 - 处理大型列表:一个类实例或为每个元素创建新对象?