从零搭建TypeScript与React开发环境
前言
1. 搭建webpack的基础环境
1.1、项目初始化
npm init
1.2、安装webpack4
npm install webpack webpack-cli -D
1.3、小试牛刀
// 在webpack配置文件中使用
module.exports = {
mode: 'production'
}; // 在命令行中使用
webpack --mode=production
- 创建src/main.js
console.log('hello, world')
- 在package.json中配置命令
"scripts": {
"dev": "webpack ./src/main.js --mode development"
},
2. 配置功能
- 在根目录创建一个webpack.config.js
- 修改package.json
"scripts": {
"dev": "webpack --config webpack.config.js --mode development"
},
2.1、配置babel 安装依赖
npm install babel-loader @babel/core @babel/cli @babel/preset-env -D
npm install core-js regenerator-runtime -S
- Babel的核心功能包含在 @babel/core 模块中。
- babel提供的命令行工具@babel/cli，主要是提供babel这个命令。
- @babel/preset-env 主要作用是对我们所使用的并且目标浏览器中缺失的功能进行代码转换和加载 polyfill。在不进行任何配置的情况下，它所包含的插件将支持所有最新的JS特性(ES2015,ES2016等，不包含 stage 阶段)，将其转换成ES5代码。
- core-js和regenerator-runtime可以模拟完整的ES2015+环境。这意味着可以使用诸如Promise和Map之类的新的内置组件、Array.from之类的静态方法、Array.prototype.includes之类的实例方法。
- @babel/preset-env提供了一个useBuiltIns参数，设置值为usage时，就只会包含代码需要的polyfill。有一点需要注意：配置此参数的值为usage，必须要同时设置corejs。
module.exports = {
presets: [
[
'@babel/env',
{
useBuiltIns: 'usage',
corejs: 3
}
]
]
};
module.exports = {
entry: ...,
output: ...,
module: {
rule: [
{
test: /\.(js|ts)x?$/, //jsx或者tsx文件
exclude: /(node_modules)/, // 排除node_modules
use: {
loader: 'babel-loader'
}
}
]
}
}
2.2、配置预处理器
npm install sass-loader dart-sass css-loader style-loader file-loader -D
- 修改webpack配置
module.exports = {
entry: ...,
output: ...,
module: {
rule: [
...,
{
test: /\.(c|sc|sa)ss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
}
]
},
{
test: /\.(png|jpg|gif|woff|svg|ttf)$/,
use: [
'file-loader'
]
}
]
}
}
2.3、配置HtmlWebpackPlugin
npm i html-webpack-plugin -D
- 修改webpack配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
module.exports = {
entry: ...,
output: {...},
module: {...},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'public/index.html'),
title: 'ts-react-starter',
filename: 'index.html'
}),
]
}
- 创建public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
2.4、配置 devServer 热更新功能
npm i webpack-dev-server -D
- 修改webpack配置
module.exports = {
entry: ...,
output: {...},
module: {...},
plugins: [...],
devServer: {
contentBase: path.resolve(__dirname, buildPath),
compress: true,
port: 9000
}
}
- 修改package.json
"scripts": {
"dev": "webpack-dev-server --open"
},
- 安装依赖
npm i react react-dom react-router-dom -S
npm i @babel/preset-react -D
- 修改babel.config.js
module.exports = {
presets: [
...,
'@babel/preset-react'
]
};
- 创建src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route
} from "react-router-dom"; import 'core-js/stable';
import 'regenerator-runtime/runtime'; const Root = document.getElementById('root'); const Test = () => <div className="test">test</div>; ReactDOM.render(
<Router>
<Route path='/' component={Test}>
</Route>
</Router>,
Root
);
- 修改webpack.config.js中的entry为src/index.jsx。
- 运行npm run dev即可看到效果。
npm i @types/react @types/react-dom @types/react-router-dom typescript @babel/preset-typescript -D
- 修改babel.config.js
module.exports = {
presets: [
...,
'@babel/preset-typescript'
]
};
{
"compilerOptions": {
"target": "ES2016",
"module": "commonjs",
"jsx": "react",
"strict": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"inlineSourceMap": true
},
"include": [
"src"
]
}
- 将.jsx文件改为tsx文件。
- 重新运行npm run dev即可看到效果。
5、优化webpack
5.1、mini-css-extract-plugin
npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
...
{
test: /\.(c|sc|sa)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development'
}
},
...
]
},
]
},
plugins: [
...
new MiniCssExtractPlugin({
filename: 'index.css'
}),
],
}
5.2、optimize-css-assets-webpack-plugin
npm i cssnano optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
plugins: [
...
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /index\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }]
},
canPrint: true
})
],
}
总结
作者：zhangwinwin来源： github
从零搭建TypeScript与React开发环境的更多相关文章
- 搭建 webpack、react 开发环境（三）
配置 react-router-dom 我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...
- 搭建 webpack、react 开发环境（二）
配置处理样式文件 到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...
- 搭建 webpack、react 开发环境（一）
基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...
- 从零搭建和配置OSX开发环境
对于每一名开发者来说,更换系统或者更换电脑的时候,都免不了花上不短的时间去折腾开 发环境的问题.我本人也是三番两次,深知这个过程的繁琐.所有,根据我自己以往的经验, 以及参考一下他人的意见,整理一下关 ...
- 搭建公司的React开发环境
记录公司环境搭建 1.安装VSCODE, 安装网上的推荐各种控件2.安装node, yarn, 会自动添加path3.先初始化npm 全部按回车默认. npm init. 初始化yarn: yarn ...
- Webpack笔记（二）——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建
1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...
- react学习笔记（一）用create-react-app构建 React 开发环境
React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...
- Mac中搭建 iOS 的 React Native 环境
手把手教你在Mac中搭建iOS的 React Native环境 http://www.cnblogs.com/damnbird/p/6074607.html 准备工作 1.你需要一台Mac电脑..(这 ...
随机推荐
- 机器学习 第4篇：数据预处理（sklearn 插补缺失值）
由于各种原因,现实世界中的许多数据集都包含缺失值,通常把缺失值编码为空白,NaN或其他占位符.但是,此类数据集与scikit-learn估计器不兼容,这是因为scikit-learn的估计器假定数组中 ...
- java中根据后端返回的数据加载table列表
<%//引入 js @ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML& ...
- 码农英语四级考了6次，也能进知名IT外企
程序员学英语 这显然不是新鲜的话题,但再怎么重复强调都不过分! 为啥要学 IT是当今世界发展最快的行业,没有之一!作为其中的从业人员,要始终保持对最新技术的关注度,难免需要阅读英文新闻或文章 平时工作 ...
- JavaSwing 船只停靠管理可视化（四）
JavaSwing 船只停靠管理可视化(一) JavaSwing 船只停靠管理可视化(二) JavaSwing 船只停靠管理可视化(三) JavaSwing 船只停靠管理可视化(四) JavaSwin ...
- 发起一个开源项目：基于 .NET 的博客引擎 fluss
今天我们发起一个开源项目,它的名字叫 fluss,fluss 是 river 的德语. 百川归海,每一个博客就如一条河流,输入的是文字,流出的是知识,汇入的是知识的汪洋大海. 川流不息,fluss 是 ...
- 使用sqoop将mysql数据导入到hive中
首先准备工具环境:hadoop2.7+mysql5.7+sqoop1.4+hive3.1 准备一张数据库表: 接下来就可以操作了... 一.将MySQL数据导入到hdfs 首先我测试将zhaopin表 ...
- Centos7无网络下安装mysql5.7——mysql-rpm安装
本教程指将mysql安装到系统默认目录下,如想自定义修改目录,请在rpm安装时自行修改: rpm -ivh --prefix= /opt xxx.rpm #将xxx.rpm安装到/opt下 一.下载m ...
- 原来大数据 Hadoop 是这样存储数据的
HDFS概述 产生背景 随着数据量越来越大,在一个操作系统中存不下所有的数据.需要将这些数据分配到更多的操作系统中,带来的问题是多操作系统不方便管理和维护.需要一种系统来管理多台机器上的文件,这就是分 ...
- 文档驱动开发模式在 AIMS 中的应用与实践
摘要:程序员常会说:我最讨厌别人写的代码没有文档,我也最讨厌自己需要写文档. 有一个很老的梗: 我最讨厌别人写的代码没有文档,我也最讨厌自己需要写文档. 有这种想法的程序员应该算是一个老鸟了,对于大多 ...
- 关于echarts中的noDataLoadingOption——loading动画的问题
在最近的一个项目中用到echarts这个插件,其中关于noDataLoadingOption配置项的问题让我困惑了好长时间.经过蛋疼的查找下,终于搞明白是版本的原因. 且看官网的介绍:ECharts, ...