Webpack 4 + React + Typescript 搭建启动模版

2019年是个崭新的开始，在过去半年的工作中我参与到公司一个大型项目的维护和开发中，深深的体会到了react项目中数据流向复杂，参数类型错乱带来的痛苦体验，于是在崭新的一年我决定拥抱Typescript来解决避免在以后的项目中遇到同样痛苦的问题。

这里先从一个简单的Webpack 4 + React + Typescript 配置模版开始。

首先,我们需要建立文件的基本结构:

proj/
├─ dist/
└─ src/└─ components/

cd proj初始化项目

npm init

然后开始安装依赖：webpack

npm i webpack webpack-cli -D

创建webpack.config.js

const path = require('path');
module.exports = {entry: "./src/index.tsx",output: {path: path.join(__dirname, '/dist'),filename: 'bundle.js'}
};

安装typescript 加载器

npm i typescript awesome-typescript-loader source-map-loader -D

配置脚本 typescript tsconfig.json

{"compilerOptions": {"outDir": "./dist/","sourceMap": true,"noImplicitAny": true,"module": "commonjs","target": "es5","jsx": "react"},"include": ["./src/**/*” ]
}

在webpack.config.js 加入文件扩展名解析

resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},

引入react依赖

npm i react react-dom @types/react @types/react-dom

@ types /前缀意味着我们还想获取React和React-DOM的声明文件

在根目录添加html脚本 indec.html

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title>   </head><body><div id="example"></div></body>
</html>

在src目录添加入口文件index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";ReactDOM.render(<Hello compiler="TypeScript" framework="React" />,document.getElementById("example")
);

在src/components目录添加一个Hello.tsx组件，用了react的function 无状态组件和typescript 的interface

import * as React from "react";
export interface HelloProps {compiler: string;framework: string;
}
export const Hello = (props: HelloProps) => (<h1>Hello from {props.compiler} and {props.framework}!</h1>
);

引入html-webpack-plugin 实现html模版自动生成

npm i html-webpack-plugin -D

完整的webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: "./src/index.tsx",output: {path: path.join(__dirname, '/dist'),filename: 'bundle.js'},devtool: "source-map",resolve: {// Add '.ts' and '.tsx' as resolvable extensions.extensions: [".ts", ".tsx", ".js", ".json"]},module: {rules: [// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader’.  { test: /\.tsx?$/, loader: "awesome-typescript-loader" },// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }]},plugins: [new HtmlWebpackPlugin({template: './index.html'})],// 用来替换全局变量// externals: {// react: "React",// "react-dom": "ReactDOM"
// }
};

引入webpack-dev-server

npm i webpack-dev-server --D

更新package.json

"scripts": {"start": "webpack-dev-server --mode development --open --hot","build": "webpack --mode production"
}

运行npm start 在浏览器打开默认端口localhost:8080 查看

转载于:https://www.cnblogs.com/chrissong/p/10443067.html

Webpack 4 + React + Typescript 搭建启动模版相关推荐

React+TypeScript+webpack4多入口项目搭建
资源 React-16.8.* react-router-dom-4.3.* TypeScript-3.5.* webpack-4.* eslint-5.16.* 项目目录 ├── dist # 打包 ...
React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
一.通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目,可以看到 ...
【React+TS】从零开始搭建react+typescript+router+redux+less+pxToVw自适应+sass+axios反向代理+别名@+Antd-mobile
一.通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目,可以看 ...
从零搭建webpack的react开发/生产环境
一.初始化项目在命令行中敲入如下命令: mkdir Webpack-react && cd Webpack-react && npm init -y 然后你就可以在你 ...
react项目搭建，步骤最全，附源码git地址(react+router+typescript+redux+axios+antdesign+mock+eslint)
企业级react项目搭建流程,基于官网推荐脚手架create-react-app搭建的项目基本框架,在该基础上增加项目所需要的功能插件等.代码git地址base分支:https://github.co ...
从零开始配置 react + typescript（三）：webpack
本篇为从零开始配置 react + typescript 系列第三篇,将带大家完成模板项目的 webpack 配置.整个项目的配置我力求达到以下目标: 灵活: 我在配置 eslint 是选择使用 j ...
react + typescript + materialUI（Mui）系统基础搭建
react + typescript + materialUI(Mui)系统基础搭建首先根据 React with TypeScript and Less 这篇教程的介绍搭建基于TypeScript ...
React组件库实践：React + Typescript + Less + Rollup + Storybook
背景原先在做低代码平台的时候,刚好有搭载React组件库的需求,所以就搞了一套通用的React组件库模版.目前通过这套模板也搭建过好几个组件库. 为了让这个模板更干净和通用,我把所有和低代码相关的代 ...

Webpack 4 + React + Typescript 搭建启动模版

Webpack 4 + React + Typescript 搭建启动模版相关推荐

最新文章

热门文章