使用webpack在typescript项目中构建es6模块

Question

我正在尝试在我的项目中使用imagemin节点包。这是一个es6模块，我在使用它时出错。

CCD_ 1；类型"；作为"；模块"；包装中.json

CCD_ 2；类型"；作为"；commonjs"；包装中.json

我的webpack配置：

export default env => {
return {
mode: env.production ? 'production' : 'development',
entry: {
main: './src/main.ts',
worker: './src/worker.ts'
},
target: ['node', 'es2019'],
devtool: env.production ? false : 'inline-source-map',
watch: !env.production,
resolve: {
extensions: ['.ts', '.js'],
alias: {
src: _resolve(process.cwd(), './src')
}
},
module: {
rules: [{
test: /.ts$/,
include: _resolve(process.cwd(), "src"),
use: 'ts-loader',
exclude: [/node_modules/, /.spec.ts/, /.e2e-spec.ts/]
}],
},
externalsPresets: { node: true },
externals: [nodeExternals()],
output: {
filename: '[name].js',
path: OUTPUT_DIR,
clean: !!env.production,
devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]',
library: {
type: 'module'
}
},
optimization: {
minimize: false, //!!env.production
mangleExports: true,
minimizer: [new terserPlugin({
terserOptions: {
output: {
comments: false
},
keep_classnames: true,
},
extractComments: false,
})]
},
experiments: {
outputModule: true
}
};
};

我的tsconfig:

{
"compilerOptions": {
"module": "ES2020",
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "es2019",
"sourceMap": true,
"strict": true,
"baseUrl": ".",
"esModuleInterop": true,
"noImplicitAny": true,
"moduleResolution": "node",
"outDir": "../bin/server",
"typeRoots": [
"node_module/@types",
"./typings"
],
"types": [
"node",
"@types/jest"
]
},
"exclude": [
"node_modules"
]
}

当我试图"；导入"；imagemin在我的一个.ts文件中，webpack将其转换为"；要求"；。我也尝试过使用import()，但它也不起作用。我在github 上进行了回购

有没有办法获得es6捆绑包(首选(或将imagemin与commonjs捆绑包一起使用？

Answer 1

我找不到通过webpack捆绑es6格式的方法，但我可以在通过webpack捆绑的同时使用commonjs系统中的es6模块。

externals: [
nodeExternals({
allowlist: ['imagemin', 'imagemin-mozjpeg']
}),
async function ({ request }) {
if (request === 'imagemin' || request === 'imagemin-mozjpeg')
return `import ${request}`;
},
]

这就是我让imagemin工作的方式。

Answer 2

更改启动脚本

"start": "node --experimental-modules src/index.mjs "

和In-package.json添加

{ 
...
"type": "module",
...
}