Webpack, Babel 및 TypeScript를 사용하여 React 앱 설정
6481 단어 typescriptbabelreactwebpack
그래서 당신은 TypeScript를 우연히 발견했고 그것이 제공해야 하는 많은 다른 것들과 함께 유형 안전성을 추가할 수 있는 방법을 좋아했습니다. 그럼 지난 주 앱을 수정하고 TypeScript를 추가해 봅시다. webpack 및 babel을 사용하여 반응 앱을 설정하는 방법에 대한 지난주 기사를 읽지 않은 경우 아래 링크로 이동하여 TypeScript를 추가할 수 있는 기본 반응 앱을 설정하십시오.
스타터 코드를 얻으려면 아래 링크를 클릭하십시오.
GitHub 리포지토리 링크: react-with-webpack
이제 필요한 단계부터 시작하겠습니다.
다음 패키지를 설치하십시오.
다음 명령을 사용하여 @types/react 및 @types/react-dom.
--save-dev를 좀 더 미묘한 -D로 대체하여 패키지를 dev 종속성으로 설치할 수도 있습니다.
npm install typescript
npm install @types/react @types/react-dom --save-dev
@types/react: React에 대한 유형 정의를 포함합니다.
@types/react-dom: React DOM에 대한 유형 정의를 포함합니다.
프로젝트에 TypeScript를 포함하고 있음을 Babel에 알려야 합니다. 이제 패키지를 설치해 보겠습니다.
/preset-typescript를 dev 의존성으로.
npm install @babel/preset-typescript --save-dev
이제 사용할 TypeScript 파일을 Babel에 알릴 수 있는 수단이 생겼습니다. 하지만 우리는 여전히 이 파일들을 웹팩으로 로드해야 합니다, 그렇죠? 이를 위해서는 ts-loader라는 다른 패키지가 필요합니다.
npm install -D ts-loader
package.json 파일은 다음과 같아야 합니다.
이제 필요한 모든 패키지가 있습니다. webpack.config.js 및 .babelrc 파일을 변경할 시간입니다.
아래 코드를 .babelrc 파일에 있는 코드로 바꿉니다.
{
"presets": [
"@babel/env",
"@babel/react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
보시다시피 새로운 사전 설정을 추가하고 있습니다.
/preset-typescript를 이미 존재하는 사전 설정 세트에 추가합니다.
이제 webpack.config.js 파일을 변경할 시간입니다. 아래 코드를 복사하고 파일에 있는 기존 코드를 바꿉니다.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.tsx",
output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
mode: process.env.NODE_ENV || "development",
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
devServer: { contentBase: path.join(__dirname, "src") },
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: ["ts-loader"],
},
{
test: /\.(css|scss)$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
use: ["file-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
],
};
TypeScript를 사용할 시간입니다. 하지만 잠깐, 이 디렉터리가 TypeScript 프로젝트임을 지정하는 것이 필요합니다. 맞죠! TypeScript 파일이 컴파일될 컴파일러 옵션도 제공해야 합니다. 이를 위해서는 tsconfig.json이라는 새 파일이 필요합니다.
계속해서 해당 파일을 생성해 보겠습니다.
touch tsconfig.json
지금은 tsconfig.json 파일에서 기존 코드를 제거하고 아래 코드로 바꿉니다.
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
이제 속성에 대해 살펴보겠습니다.
"target": "es5"=> es6 이상의 코드를 es5로 컴파일하여 브라우저와 호환되도록 합니다.
"include": [src]"=> src 폴더에 있는 파일만 포함되도록 지정합니다.
"sourceMap": true => 디버깅을 위해 프로덕션 코드에서 사용할 수 있도록 해당 '.map' 파일을 생성합니다.
"strict": true => 광범위한 유형 검사 동작을 활성화하여 프로그램 정확성을 더 강력하게 보장합니다.
"allowJs": true => .ts 및 .tsx 파일 대신 프로젝트 내에서 JavaScript 파일을 가져올 수 있습니다.
파일에 사용된 다양한 속성에 대해 자세히 알아보려면 여기link를 방문하십시오.
마지막으로 JavaScript 파일(.js)의 이름을 TypeScript - React(.tsx)로 바꿀 시간입니다.
index.js 및 App.js를 각각 index.tsx 및 App.tsx로 이름 변경
계속해서 아래 명령을 실행하여 앱을 시작하십시오.
npm run start
앱은 http://localhost:8080에서 제공됩니다.
프로젝트에 TypeScript를 성공적으로 추가했습니다. 계속해서 그 기능을 활용하여 훌륭한 웹앱을 구축하십시오.
좋은 하루 되세요. 전체 내용을 읽어 주셔서 감사합니다.
전체 프로세스 중에 문제가 발생한 경우를 대비하여 Github Repo에 대한 링크가 있습니다. 패키지 업데이트로 인해 문제가 발생하는 경우 자유롭게 조정하십시오.
표지 사진 제공: Cristina G
Reference
이 문제에 관하여(Webpack, Babel 및 TypeScript를 사용하여 React 앱 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/deadwing7x/setup-a-react-app-using-webpack-babel-and-typescript-5927텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
