无法使用babel加载程序编译符号链接包的TypeScript

Question

我有两个包："shared"one_answers"web"。它们都使用TypeScript。我在"web"中使用带有babel加载器的webpack。当我符号链接"shared"时，它无法编译其TypeScript。

此问题建议在webpack.config.js中使用symlinks: false，但不起作用：https://github.com/webpack/webpack/issues/1643

文件夹结构：

root
│
└───shared
│   │   package.json
│   │   UseMe.ts
│   
└───web
│   .babelrc
│   index.ts
│   package.json
│   tsconfig.json
│   webpack.config.js

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"
}
}

共享\UseMe.ts

class UseMe {
prop: string
}
export default UseMe;

web\.babelrc

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

web\index.ts

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

web\package.json

{
"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'
},
}
]
}
};

命令：

cd shared
npm install
npm link
cd ..web
npm install
npm link shared
npm run build

错误：

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
| }
|

Answer 1

解决方案

1. 删除rootweb.babelrc并将其替换为rootwebbabel.config.js：

module.exports = function (api) {
api.cache(true);
const presets = ["@babel/preset-typescript"];
const plugins = [];
return {
presets,
plugins
};
}

2. 从rootwebwebpack.config.js中删除行exclude: /node_modules/

更多信息

第一个问题是，当使用Babel时，.babelrc将其范围限制在与package.json相同的文件夹中。因此，即使我手动将"共享"文件夹移到rootweb中，它仍然无法工作，除非我删除了sharedpackage.json。

第二个问题是，当一个包被符号链接时，它最终会出现在您的"node_module"中，因此exclude: /node_modules/会将其从传输中排除。

有关详细信息，请参阅本页：https://babeljs.io/docs/en/config-files

感谢@ford04给出了答案，我只是写下了步骤。