Javascript 无法使用babel loader编译符号链接包的TypeScript

我有两个软件包：“共享”和“网络”。他们都使用打字脚本。我在“web”中使用带有babel loader的webpack。当我符号链接“共享”时，它无法编译其类型脚本

此问题建议在webpack.config.js中使用

symlinks:false

，但不起作用：

文件夹结构： shared\package.json

{
  "name": "shared",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.6.4"
  }
}

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-typescript": "^7.1.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "devDependencies": {
    "typescript": "^3.3.3"
  }
}

共享\UseMe.ts

class UseMe {
    prop: string
}

export default UseMe;

web\.LRC

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

web\index.ts

import UseMe from 'shared/UseMe';
const x = new UseMe();

web\package.json

{
  "name": "shared",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.6.4"
  }
}

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-typescript": "^7.1.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "devDependencies": {
    "typescript": "^3.3.3"
  }
}

web\tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
  }
}

web\webpack.config.js

const path = require('path');

module.exports = {
    entry: './index.ts',
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
        symlinks: false
    },
    module: {
        rules: [
            {
                test: /\.(ts|js|tsx)?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
            }
        ]
    }
};

命令： 错误： 解决方案

删除

root\web\.babelrc

并将其替换为

root\web\babel.config.js

：

从

root\web\webpack.config.js

更多信息 第一个问题是，在使用Babel时，

.babelrc

将其范围限制在与

package.json

相同的文件夹中。因此，即使我手动将“共享”文件夹移动到

root\web

中，它仍然无法工作，除非我删除了

shared\package.json

第二个问题是，当一个包被符号链接时，它会在“节点模块”中结束，因此

exclude:/node\u modules/

会将其从传输中排除

有关更多信息，请参阅本页：

---

多亏@ford04给出了答案，我才写出了步骤。

安装并添加

@babel/plugin建议类属性作为
的插件。babelrc
帮助？@ford04好主意，我尝试了你的建议，但没有解决它。即使我删除了属性并将
类
更改为
接口
，它仍然无法编译
.ts
文件。因此，这看起来不像是由于属性造成的。您还需要查看一下
babel.config.js
，因为使用
.babelrc
的babel转换会在
package.json
指示的包根处停止。当您有
symlinks:false
时，我希望babel忽略链接包的转换，因为您为
babel loader
设置了
exclude:/node\u modules/
。
ERROR in ./node_modules/shared/UseMe.ts 2:8
Module parse failed: Unexpected token (2:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| class UseMe {
>     prop: string
| }
|

module.exports = function (api) {
    api.cache(true);

    const presets = ["@babel/preset-typescript"];
    const plugins = [];

    return {
        presets,
        plugins
    };
}