前言
TypeScript 是 JavaScript 的超集,为其增加了类型系统,可以编译为普通 JavaScript 代码。这篇我们将会学习是如何将 webpack 和 TypeScript 进行集成。
安装依赖
npm install --save-dev typescript ts-loader
新增tsconfig.json配置文件
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"module": "es6",
"target": "es5",
"jsx": "react-jsx",
"allowJs": true,
"moduleResolution": "node",
"baseUrl": "./src",
"paths": {
"@": ["./"],
"@/plugins": ["./plugins"],
"@/css": ["./css"],
"@/layout": ["./layout"],
"@/pages": ["./pages"],
"@*": ["./*"]
}
}
}
修改webpack配置文件
// resolve新增扩展
resolve: {
extensions: ['.tsx', '.ts', '.js'],
// 省略之后的配置
},
// 新增ts-loader配置
module: {
rules: [
// 省略之前的配置
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
}
],
},
安装react的type库
npm i —save-dev @types/react
安装完成之后,我们就可以引入react找到对应react type库
项目新增.d.ts
// src/react-app-env.d.ts
/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />
declare namespace NodeJS {
interface ProcessEnv {
readonly NODE_ENV: 'development' | 'production' | 'test';
readonly PUBLIC_URL: string;
}
}
declare module '*.avif' {
const src: string;
export default src;
}
declare module '*.bmp' {
const src: string;
export default src;
}
declare module '*.gif' {
const src: string;
export default src;
}
declare module '*.jpg' {
const src: string;
export default src;
}
declare module '*.jpeg' {
const src: string;
export default src;
}
declare module '*.png' {
const src: string;
export default src;
}
declare module '*.webp' {
const src: string;
export default src;
}
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<
SVGSVGElement
> & { title?: string }>;
const src: string;
export default src;
}
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.scss' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.sass' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.less' {
const classes: { readonly [key: string]: string };
export default classes;
}
有了这个文件,ts-loader会自动帮我们处理资源问题,还有NodeJS中的环境变量
创建一个tsx组件
// src/components/HelloWorld.tsx
import React from 'react';
const HelloWorld: React.FC= () => {
return <div>hello world</div>;
};
export default HelloWorld;
修改App.tsx
import React from 'react';
import HelloWorld from '@/components/HelloWorld';
function App(): React.ReactElement {
return (
<div className="app">
React App
<HelloWorld />
</div>
);
}
export default App;
到这里我们的webpack 5 创建react应用已经结束了