如何使用 awesome-typescript-loader 和 babel 来转译特定的节点模块？

Question

现在我一直在尝试转译一个使用对象扩展运算符的节点模块。这对我来说是个问题，因为我的应用程序假设支持 Edge 并且到目前为止，它不支持对象扩展运算符。

我通过将 useBabel 属性设置为 true 将 awesome-typescript 加载器配置为使用 babel，这样我就不需要自己安装 babel-loader。我还添加了一个名为 babel-preset-edge 的预设，它添加了许多有用的预设和插件。它默认添加的重要的一个是 @babel-plugin-proposal-object-rest-spread，它是转译该节点模块所必需的。

即使使用此设置，awesome-typescript 似乎总是忽略我要转换的模块。当我这样做时，这对我来说变得很明显

include: function(absPath) {
    // I want to in include my source code or the module I want to transpile.
    const includePath = /@furystack/.test(absPath) || /src/.test(absPath)
    // this will always output true because all the paths have src in their path. 
    // Not a single one from node modules.
    console.log(includePath)
    return includePath
}

它应该输出一些真值和假值（它是我的源代码或 furystack 为真，其他任何东西为假）但事实并非如此。

这就是我的装载机的样子

module: {
  rules: removeEmpty([
    {
      test: /\.(ts|tsx)$/,
      use: [
        {
          options: {
            useTranspileModule: true,
            forceIsolatedModules: true,
            useCache: true,
            useBabel: true,
            reportFiles: ['src/**/*.{ts,tsx}'],
            babelCore: '@babel/core'
          },
          loader: 'awesome-typescript-loader'
        }
      ],
      include: function(absPath) {
        return /@furystack/.test(absPath) || /src/.test(absPath)
      }
    },
}

这就是我的 .babelrc 的样子

{
  "presets": [
    [
      "edge",
      {
        "transpile": "modern",
        "modules": "false"
      }
    ]
  ]
}

这就是我的 .tsconfig.json 的样子

{
  "compilerOptions": {
    "outDir": "lib",
    "module": "esnext",
    "target": "esnext",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "jsx": "preserve",
    "baseUrl": "./src",
    "rootDir": "./src",
    "moduleResolution": "node",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": false,
    "alwaysStrict": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "noEmit": true,
    "types": ["jest", "node"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

我的配置有什么问题？

Answer 1

感谢 Ashish(Is it possible to transpile local modules from node_module?) 的回答，我能够想出一个解决方案。

所以问题是我使用的模块正在导入一个未完全转译的 js 文件（对象扩展运算符）而不是 ts 或 tsx 文件。这意味着我需要重新安装 babel loader，以便我可以使用 babel loader 单独传递 js 文件。我遇到的下一个问题是模块是在 commonjs 下编译的，所以导入也必须被转译。

这是我的装载机现在的样子。

{
   {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              'edge',
              {
                transpile: 'es2015',
                modules: 'commonjs'
              }
            ]
          ]
        }
      },
      include: [path.resolve(__dirname, 'node_modules/@furystack')]
    },
    {
      test: /\.tsx?$/,
      use: [
        {
          options: {
            useTranspileModule: true,
            forceIsolatedModules: true,
            useCache: true,
            useBabel: true,
            babelOptions: {
              babelrc: false /* Important line */,
              presets: [
                [
                  'edge',
                  {
                    transpile: 'modern',
                    modules: 'false'
                  }
                ]
              ]
            },
            reportFiles: ['src/**/*.{ts,tsx}'],
            babelCore: '@babel/core'
          },
          loader: 'awesome-typescript-loader'
        }
      ],
      include: [path.resolve(__dirname, 'src')]
    },
}