做网站找那家公司好,域名ip查询查网址,万网空间管理,即墨网站设计之前写过类似的文章#xff0c;这次看到一本新书里也介绍了这个知识点#xff0c;故尝试之。
Refer: 《Learn React With TypeScript - A Beginners Guide To Reactive Web Development With React 18 and TypeScript》chapter3 Creating a project with webpack 1.先建立一…之前写过类似的文章这次看到一本新书里也介绍了这个知识点故尝试之。
Refer: 《Learn React With TypeScript - A Beginners Guide To Reactive Web Development With React 18 and TypeScript》chapter3 Creating a project with webpack 1.先建立一个空的文件夹my-app并用vscode打开然后到根目录底下创建package.json和src目录并在其中添加index.html:
{name: my-app,version: 1.0.0,description: My React and TypeScript app
}!DOCTYPE html
html
headmeta charsetutf-8 /titleMy app/title
/head
bodydiv idroot/div
/body
/html 2.安装和配置ts:
npm install -D typescript 根目录新建tsconfig.json文件:
{compilerOptions: {noEmit: true,lib: [dom, dom.iterable, esnext],moduleResolution: node,allowSyntheticDefaultImports: true,esModuleInterop: true,jsx: react,forceConsistentCasingInFileNames: true,strict: true},include: [src],exclude: [node_modules, dist]
}3.安装React:
npm install react react-dom
安装类型(react包本身不含类型): npm install types/react types/react-dom
4.在src目录地下创建index.tsx:
import React, { StrictMode } from react;
import { createRoot } from react-dom/client;const root createRoot(document.getElementById(root) as HTMLElement);function App() {return h1My React and TypeScript App!/h1;
}root.render(StrictModeApp //StrictMode
);5.安装Babel:
npm i -D babel/core babel/preset-env babel/preset-react babel/preset-typescript babel/plugin-transform-runtime babel/runtime
根目录创建.babelrc.json:
{presets: [babel/preset-env,babel/preset-react,babel/preset-typescript],plugins: [[babel/plugin-transform-runtime,{regenerator: true}]]
}6.安装webpack npm i -D webpack webpack-cli webpack-dev-server babel-loader html-webpack-plugin
7.配置webpack
a.安装node-ts库允许在ts文件中配置:
npm i -D ts-node
b.根目录上创建一个文件webpack.dev.config.ts:
import path from path;
import HtmlWebpackPlugin from html-webpack-plugin;
import {Configuration as WebpackConfig,HotModuleReplacementPlugin,
} from webpack;
import { Configuration as WebpackDevServerConfig } from webpack-dev-server;type Configuration WebpackConfig {devServer?: WebpackDevServerConfig;
};const config: Configuration {mode: development,output: {publicPath: /,},entry: ./src/index.tsx,module: {rules: [{test: /\.(ts|js)x?$/i,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [babel/preset-env,babel/preset-react,babel/preset-typescript,],},},},],},resolve: {extensions: [.tsx, .ts, .js],},plugins: [new HtmlWebpackPlugin({template: src/index.html,}),new HotModuleReplacementPlugin(),],devtool: inline-source-map,devServer: {static: path.join(__dirname, dist),historyApiFallback: true,port: 4000,open: true,hot: true,},
};export default config;c.在package.json中追加启动脚本:
,scripts: {start: webpack serve --config webpack.dev.config.ts}
8.允许app命令行使用:
npm start
运行结果: 源码
