TypeScript ESLint 플레이그라운드를 만들었습니다.
때때로 나는 typescript-eslint 프로젝트에 기여하는 것을 즐겼습니다. 그러나 문제를 재현하기 위해 "typescript-eslint"를 구성하는 것은 저를 피곤하게 만들었습니다.
그래서 typescript eslint 🎉용 web playground을 만들었습니다.
"typescript-eslint"규칙을 구성하려는 사람에게도 유용할 것 같습니다.
부담 없이 약간의 별점이나 이슈를 주세요 :)- Github repo
그것은 어떻게 만들었습니까?
가장 큰 문제는 노드 내장 모듈(fs, path...)을 사용하는 번들링 모듈이었습니다.
typescript-eslint와 eslint를 webpack으로 묶을 때 NodeJS 내장 모듈(예: 'fs', 'path')을 묶을 수 없기 때문에 오류가 발생합니다.
ERROR in ./node_modules/@eslint/eslintrc/lib/config-array-factory.js
Module not found: Error: Can't resolve 'fs' in '...project/node_modules/@eslint/eslintrc/lib'
그래서 특히 그들을 다루어야 합니다. 내가 신경써야 할 두 가지 경우가 있다.
ERROR in ./node_modules/@eslint/eslintrc/lib/config-array-factory.js
Module not found: Error: Can't resolve 'fs' in '...project/node_modules/@eslint/eslintrc/lib'
1. 런타임에 사용되지 않는 모듈 처리
첫 번째 경우에는 webpack null-loader을 사용할 수 있습니다. 빈 모듈로 일부 모듈을 묶을 수 있습니다.
널 로더를 설치해야 합니다.
$ npm install null-loader --save-dev
그런 다음 webpack 구성에 로더를 추가했습니다. 웹팩은
test
에 지정된 모듈을 빈 모듈로 로드합니다. 이를 통해 웹팩 오류를 피할 수 있습니다.module.exports = {
rules: [
//...
{
test: [
/\/eslint\/.*\/cli-engine/,
// ...
],
use: "null-loader"
}
]
}
2. 런타임에 사용되는 모듈 처리
이 경우 The NormalModuleReplacementPlugin가 작동합니다. 이를 통해 일부 리소스를 사용자 지정 리소스로 대체할 수 있습니다. 이를 통해 모듈을 사용자 정의 모듈로 교체할 수 있습니다.
// src/modules/globby.js - custom module
module.exports = {
sync() {
return ["./tsconfig.json"];
},
};
const webpack = require('webpack');
module.exports = {
//...
plugins: [
new webpack.NormalModuleReplacementPlugin(
/globby/, // target module
"src/modules/globby.js" // custom module
),
]
}
github repo에서 모든 코드를 확인할 수 있습니다. 읽어 주셔서 감사합니다 :)
Reference
이 문제에 관하여(TypeScript ESLint 플레이그라운드를 만들었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yeonjuan/i-created-typescript-eslint-playground-a4l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)