NodeJS 使用webpack打印脚本和esm构建Express服务器

vulvrdjw  于 2023-01-25  发布在  Node.js
关注(0)|答案(2)|浏览(153)
    • bounty将在6天后过期**。回答此问题可获得+100声望奖励。qwerty希望引起更多人关注此问题。

我正在尝试使用webpack构建一个小项目node.js + ts

tsconfig.json
{
  "compilerOptions": {
    "lib": ["ESNext"],
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "types": ["node"],
    "allowSyntheticDefaultImports": true,
    "rootDir": "./"
  },
}

我将其添加到package.json"type": "module"

webpack.config.ts
import * as path         from 'path';
import * as webpack      from 'webpack';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const PATHS = {
  entry:  path.resolve(__dirname, 'src/server/index.ts'),
  output: path.resolve(__dirname, 'dist'),
};

const config: webpack.Configuration = {
  target:  'node',
  entry:   PATHS.entry,
  output:  {
    path:     PATHS.output,
    filename: 'bundle.js',
  },
  module:  {
    rules: [
      {
        test:    /\.ts(x?)$/,
        use:     'ts-loader',
        exclude: '/node_modules/',
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json', '.ts', '.tsx'],
  },
};

export default config;

通过运行命令"build": "webpack --config config/webpack.config.ts --mode development",我得到一个错误:
[webpack-cli]无法加载"/node_esm/webpack. config. ts "配置[webpack-cli]类型错误[ERR_UNKNOWN_FILE_EXTENSION]:/node_esm/webpack. config. ts的文件扩展名". ts"未知
我试着添加到我的config.json"ts-node": { "esm": true}中,但没有帮助解决我的问题。我需要做什么才能用webpack构建一个应用程序?

  • 节点:v16.18.1
  • ts加载程序:v9.4.2
  • typescript :v4.9.4
  • 网络包:v5.75.0
  • 网络包-客户端:5.0.1
    • UPD**我尝试过更改tsconfig。第一个选项是打开tsconfig.json文件并查找compilerOptions。将target设置为"ES5",将module设置为"CommonJS"(或者完全删除module选项)。
{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "types": ["node"],
    "allowSyntheticDefaultImports": true,
    "rootDir": "./"
  }
}

错误仍然存在。第二个选项是添加ts节点的设置:
您可以保留"模块":"ESNext"表示tsc,如果您使用webpack或其他构建工具,请为ts-node设置一个覆盖。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "types": ["node"],
    "allowSyntheticDefaultImports": true,
    "rootDir": "./"
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

在这一点上我也试着加上

{
  "compilerOptions": {
    "module": "ESNext" // or ES2015, ES2020
  },
  "ts-node": {
    // Tell ts-node CLI to install the --loader automatically, explained below
    "esm": true
  }
}

第三个选项是安装tsconfig-paths包,它也没有www.example.com所有情况下,错误仍然与之前编写的相同。help.in all cases, the error remained the same as it was written before.

package.json
{
  "name": "node_esm",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --config config/webpack.config.ts --mode development --watch",
    "build": "webpack --config config/webpack.config.ts --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cross-env": "^7.0.3",
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.15",
    "@types/node": "^18.11.18",
    "@types/webpack": "^5.28.0",
    "circular-dependency-plugin": "^5.2.2",
    "clean-webpack-plugin": "^4.0.0",
    "nodemon": "^2.0.20",
    "ts-loader": "^9.4.2",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.1.2",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-node-externals": "^3.0.0"
  }
}
lf5gs5x2

lf5gs5x21#

主要问题是Webpack使用ts-node API,而不是CLI,因此您需要适当地配置节点加载程序。
我使用以下配置使其工作。
package.json

"scripts": {
  "build": "NODE_OPTIONS='--loader ts-node/esm' webpack --mode development"
},

请参阅有关本机ECMAScript模块的ts节点文档...
如果您没有使用我们的CLI,请将加载程序标志传递给node。
如果您计划在Windows上构建此函数,则可能需要使用cross-envenv-cmd之类的函数。
注意:我不需要tsconfig.json中的任何特殊内容。不需要ts-node部分,因为它只适用于CLI。
而且,我刚刚在Webpack CLI参考中找到了此故障排除指南

类型错误[错误未知文件扩展名]:./webpack.config.ts的未知文件扩展名“.ts”

如果在TypeScript中使用本机ESM(即键入:package.json中的“模块”)。
webpack-cli支持CommonJS和ESM格式的配置,首先它尝试使用require()加载配置,一旦失败并显示错误代码“ERR_REQUIRE_ESM”(这种情况下的特殊代码),它将尝试使用import()加载配置。但是,import()方法无法与未启用加载程序挂钩的ts-node一起使用(在TypeStrong/ts-node #1007中描述)。
要修复上述错误,请使用以下命令:

NODE_OPTIONS="--loader ts-node/esm" npx webpack --entry ./src/index.js --mode production

那个页面的搜索引擎优化一定很糟糕。希望链接到这里能帮助提升一点。

6fe3ivhb

6fe3ivhb2#

这是.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
}

此文件是webpack.config.js

resolve: {
    extensions: [".ts", ".js", ".json"],
    modules: [path.resolve(__dirname, "./src"), "node_modules"],
  },

ts.config.json

// since you have `module` set in package.json
"module": "NodeNext" 
"esModuleInterop": true

package.json

"build": "webpack",
"dev:start": "nodemon --watch src  --exec \"node -r --trace-deprecation  dist/bundle.js \" ",

也在路径中

entry:  path.resolve(__dirname, 'src/server/index.ts')

我认为您不应该这样使用.resolve

entry:  path.resolve(__dirname, 'src','server','index.ts')

因为.resolve的工作是根据操作系统确定使用“/”或

相关问题