SyntaxError：使用 Typescript 和 Webpack 的 Nodejs 项目中出现意外的令牌“导出”

Question

我试图找到此解决方案的答案，但我找到的答案通常与将“模块”添加到脚本标记（这不适用于我的情况，因为我没有编写浏览器代码）或使用导入/导出有关在 javascript 文件中（Node 目前不支持），这意味着需要使用 babel 或 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后

从我使用的打字稿文件导入：

从“projectb”导入*作为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 的引用？这不是一定会失败吗？我预计对生成的索引有要求。js文件（不是 index.ts ）。

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

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

/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)

以及 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

对我来说，这是module关键tsconfig.json。

我把它从这样改成 "module": "esnext" 这样： "module": "commonjs"

Answer 2

我认为 tsconfig 这里可能是一个问题。
因为当您导入import * as ProjectB from 'projectb';projectB文件时，由于projectA tsconfig的属性，打字稿将不会对projectB文件进行include转译exclude。尝试将projectB添加到projectA的编译过程中。
就像projectA tsconfig 中的东西一样include: [ "lib/**/*", "my/path/to/projectB/**"]。