[英]Unable to compile TypeScript of symlinked package using babel-loader
I have 2 packages: 'shared' and 'web'.我有 2 个包:“共享”和“网络”。 They both use TypeScript.
他们都使用 TypeScript。 I'm using webpack with babel-loader in 'web'.
我在“web”中使用带有 babel-loader 的 webpack。 When I symlink 'shared', it's unable to compile its TypeScript.
当我符号链接“共享”时,它无法编译它的 TypeScript。
This issue suggests using symlinks: false
in webpack.config.js, but doesn't work: https://github.com/webpack/webpack/issues/1643此问题建议使用
symlinks: false
webpack.config.js 中的错误,但不起作用: 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共享\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"
}
}
shared\UseMe.ts共享\UseMe.ts
class UseMe {
prop: string
}
export default UseMe;
web\.babelrc网页\.babelrc
{
"presets": [
"@babel/preset-typescript"
]
}
web\index.ts网络\索引.ts
import UseMe from 'shared/UseMe';
const x = new UseMe();
web\package.json 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 web\tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
}
}
web\webpack.config.js 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
| }
|
root\web\.babelrc
and replace it with root\web\babel.config.js
:root\web\.babelrc
并将其替换为root\web\babel.config.js
:module.exports = function (api) {
api.cache(true);
const presets = ["@babel/preset-typescript"];
const plugins = [];
return {
presets,
plugins
};
}
exclude: /node_modules/
from root\web\webpack.config.js
root\web\webpack.config.js
中删除行exclude: /node_modules/
The first problem was that when using Babel, .babelrc
limits its scope to the the same folder as package.json
.第一个问题是,当使用 Babel 时,
.babelrc
将其 scope 限制在与package.json
相同的文件夹中。 So even if I manually moved the 'shared' folder into root\web
it still wouldn't work, unless I deleted shared\package.json
.因此,即使我手动将 'shared' 文件夹移动到
root\web
它仍然无法工作,除非我删除shared\package.json
。
The second problem was that when a package is symlinked, it winds up in your 'node_module', therefore exclude: /node_modules/
would exclude it from its transpiling.第二个问题是,当 package 被符号链接时,它会在您的“node_module”中结束,因此
exclude: /node_modules/
会将其排除在转译之外。
See this page for more information: https://babeljs.io/docs/en/config-files有关更多信息,请参阅此页面: https://babeljs.io/docs/en/config-files
Thanks to @ford04 for coming up with the answer, I just wrote up the steps.感谢@ford04 提供答案,我刚刚写下了步骤。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.