javascript - 语法错误: Unexpected token 'export' in Nodejs project with Typescript and Webpack

Question

我试图找到此解决方案的答案，但我找到的答案通常与将“模块”添加到脚本标记有关(这不适用于我的情况，因为我没有编写浏览器代码)或使用在 javascript 文件中导入/导出(Node 目前不支持)，这意味着需要使用 babel 或 typescript。由于我在 typescript 项目中看到此错误，因此我不希望看到此错误。

实际上，我有 2 个 typescript/webpack 项目(设置几乎相同，项目 A 依赖于项目 B)1 个从另一个导入定义。

在项目 B 中，我有几个类，其中 2 个是导出的，还有一些其他定义。在项目B的index.ts中:

export * from './types';
export * from './specService/spec-option-service.class';
export * from './converter/xpath-converter.class';

这些导出方式如下:

// types.ts
//
export interface IElementInfo {
  readonly id?: string;
  readonly recurse?: string;
  readonly discards?: ReadonlyArray<string>;
  readonly descendants?: {
    readonly by?: string;
    readonly throwIfCollision?: boolean;
    readonly throwIfMissing?: boolean;
  };
}

// ... plus other similarly defined exports

// specService/spec-option-service.class.ts
//
export class SpecOptionService { ...

// converter/xpath-converter.class.ts
//
export class XpathConverter { ...

然后在项目 B 的 index.ts 中，我导出所有定义(export * from blah)以供客户端使用，如本文顶部所示。

当我构建项目 B 时，导出不存在此类问题。

将项目 B 安装到项目 A 后

从我导入的 typescript 文件中使用:

import * as ProjectB from 'projectb';

Webpack 甚至成功构建了项目 A 的包，没有错误。错误发生在运行时，在这种情况下，当我去运行测试时，我看到以下内容:

/Users/User/dev/github/js/projecta/node_modules/projectb/lib/index.ts:2
export * from './types';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Module._compile (internal/modules/cjs/loader.js:892:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.projectb (/Users/User/dev/github/js/projecta/dist/projecta-test-bundle.js:292:18)

在projectb的webpack包的末尾，我发现了以下内容:

module.exports = webpack_require(/*! ./lib */"./lib/index.ts");

我认为这是有问题的。为什么 webpack 为“es5”目标构建的包包含对 typescript 的引用？这不是一定会失败吗？我预计生成的index.js 文件(而不是index.ts)需要require。

这是我第一次在 typescript 中跨项目边界进行导入/导出，所以我知道我做错了什么，但是什么呢？

两个项目中的 tsconfig.json 文件是相同的:

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "Node",
    "noImplicitAny": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "types": [
      "mocha", "node"
    ],
    "lib": [
      "es5",
      "es2015",
      "es6",
      "dom"
    ]
  },
  "include": [
    "lib/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

以及 webpack 配置:

{
    devtool: 'source-map',
    entry: {
      index: './lib/index.ts'
    },
    target: 'node',
    mode: mode,
    externals: [nodeExternals()],
    module: {
      rules: [
        {
          test: /\.ts(x?)$/,
          use: 'ts-loader'
        },
        {
          test: /\.json$/,
          use: 'json-loader'
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
      new webpack.BannerPlugin({
        banner: '#!/usr/bin/env node',
        raw: true
      })
    ],
    resolve: {
      extensions: ['.ts', '.js', '.json']
    },
    watchOptions: {
      ignored: /node_modules/
    },
    output: {
      filename: 'projecta-bundle.js',
      sourceMapFilename: 'projecta-bundle.js.map',
      path: path.join(__dirname, 'dist'),
      libraryTarget: 'commonjs'
    }
  }

项目 A 和 B 分别是 plastikfan/jaxom 和 plastikfan/zenobia。在将最新版本的 jaxom 发布到 npm 之前，我会执行 npm 发布前检查(了解到这是对早期 npm 包进行明智的做法)，以检查客户端是否可以按预期使用该包。 (过去，我在导出某些内容时犯了一个错误，但直到客户尝试使用它时，这种情况才变得明显。据我所知，在发布之前，这不是您可以检查的内容。建议的方法是使用 nom pack 打包您的软件包，然后将其安装到客户端中)。

仅供引用，zenobia package.json 是(精简版本):

{
  "name": "zenobia",
  "version": "0.0.1",
  "main": "lib/index.ts",
  "scripts": {
    "t": "mocha ./dist/zenobia-test-bundle.js",
    "test": "npm audit --skip-unused && npm run t",
    "build": "npm run build:d",
    "build:d": "webpack -d --env.mode development",
    "build:p": "webpack -p --env.mode production",
    "build:t": "webpack --config webpack.config.test.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/plastikfan/zenobia.git"
  },
  "dependencies": {
    "@types/node": "^12.12.14",
    "@types/ramda": "^0.26.36",
    "jaxine": "^2.0.1",
    "jaxom": "file:../NPM-LOCAL/jaxom-0.0.1.tgz",
    "ramda": "^0.26.1",
    "xmldom": "^0.1.27",
    "xpath": "0.0.27"
  },
  "devDependencies": {
    "@commitlint/cli": "^8.3.3",
    "@commitlint/config-conventional": "^8.2.0",
    "@types/chai": "^4.2.5",
    "@types/dirty-chai": "^2.0.2",
    "@types/mocha": "^5.2.7",
    "@types/sinon": "^7.5.1",
    "@types/sinon-chai": "^3.2.3",
    "chai": "^4.2.0",
    "commitizen": "^4.0.3",
    "cz-conventional-changelog": "^3.0.2",
    "depcheck": "^0.9.1",
    "dirty-chai": "^2.0.1",
    "mocha": "^6.2.2",
    "nyc": "^14.1.1",
    "precommit-hook": "^3.0.0",
    "raw-loader": "^4.0.0",
    "rimraf": "^3.0.0",
    "semistandard": "^14.2.0",
    "shebang-loader": "0.0.1",
    "sinon": "^7.5.0",
    "snazzy": "^8.0.0",
    "ts-loader": "^6.2.1",
    "tslint": "^5.20.1",
    "tslint-config-semistandard": "^8.0.1",
    "typescript": "^3.7.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-config-utils": "^2.3.1",
    "webpack-node-externals": "^1.7.2"
  }
}

还有 jaxom 的缩减 package.json:

{
  "name": "jaxom",
  "main": "./lib/index.ts",
  "scripts": {
    "clean": "rimraf dist && rimraf decl",
    "t": "mocha ./dist/jaxom-test-bundle.js",
    "test": "npm audit --skip-unused && npm run t",
    "build": "npm run build:d",
    "build:d": "webpack -d --env.mode development",
    "build:p": "webpack -p --env.mode production",
    "build:t": "webpack --config webpack.config.test.js"
  },
  "dependencies": {
    "@types/ramda": "^0.26.36",
    "@types/xregexp": "^3.0.30",
    "jinxed": "0.0.2",
    "moment": "^2.24.0",
    "ramda": "^0.26.1",
    "xmldom-ts": "^0.3.1",
    "xpath-ts": "^1.3.13",
    "xregexp": "^4.2.4"
  },
  "devDependencies": {
    "@commitlint/cli": "^8.2.0",
    "@commitlint/config-conventional": "^8.2.0",
    "@types/chai": "^4.2.5",
    "@types/dirty-chai": "^2.0.2",
    "@types/mocha": "^5.2.7",
    "@types/sinon": "^7.5.1",
    "@types/sinon-chai": "^3.2.3",
    "chai": "^4.2.0",
    "commitizen": "^4.0.3",
    "cz-conventional-changelog": "^3.0.2",
    "depcheck": "^0.9.1",
    "dirty-chai": "^2.0.1",
    "json-loader": "^0.5.7",
    "mocha": "^6.2.2",
    "precommit-hook": "^3.0.0",
    "raw-loader": "^4.0.0",
    "rimraf": "^3.0.0",
    "sinon": "^7.5.0",
    "sinon-chai": "^3.3.0",
    "snazzy": "^8.0.0",
    "ts-loader": "^6.2.1",
    "tslint": "^5.20.1",
    "tslint-config-semistandard": "^8.0.1",
    "typescript": "^3.7.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-config-utils": "^2.3.1",
    "webpack-node-externals": "^1.7.2"
  }
}

Answer 1

对我来说，它是 tsconfig.json 中的 module 键。

我把它改成了:“模块”:“esnext”对此:“模块”:“commonjs”