前言

平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架。
 
我们业务仔做的最多就是npm i和npm run dev或者npm start，然后在router文件夹上添加路由，在views或者pages文件夹中添加业务页面。这种快速开发对公司当然是好事，但对于开发人员来说对项目里的webpack封装和配置了解的不清楚，出
问题时很容易会不知如何解决，或者不会通过webpack去扩展新功能和优化编译速度。出去是没多大竞争力的，而且很容易被替代。
 
接下来一步一步的演示如何搭建基于TypeScript与React的一个开发环境。
 
项目代码：https://github.com/zhangwinwin/ts-react-starter (会不定时更新)

1. 搭建webpack的基础环境

webpack是一个开源的JavaScript模块打包工具，其核心是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件（有时会有多个）。这个过程就叫作模块打包。
Webpack就好比一个模块处理工厂，我们把源代码交给Webpack，由它进行加工、拼装处理，产出最终的资源文件，等待送往客户。

1.1、项目初始化

运行npm init会生成一个package.json文件，里面包含一些项目的基本信息
npm init　　

1.2、安装webpack4

webpack4将命令行相关的单独拆了出去封装成了webpack-cli。所以得安装webpack与webpack-cli
npm install webpack webpack-cli -D　　
ps：在开始之前，请确保安装了Node.js的最新版本。

1.3、小试牛刀

webpack4号称零配置。它提供mode配置选项(详情请看文档)，告知webpack使用相应模式的内置优化。
用法如下：
// 在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"

},　　
运行 npm run dev。如果出现dist/main.js说明运行成功。

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。
创建babel.config.js
module.exports = {

  presets: [

    [

      '@babel/env',

      {

        useBuiltIns: 'usage',

        corejs: 3

      }

    ]

  ]

};　　

修改webpack配置
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

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的webpack bundle尤其有用。
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 热更新功能

webpack-dev-server能够用于快速开发应用程序，可以实现不刷新页面的情况下，更新我们的页面。
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"

},　　
3、配置react
  • 安装依赖
npm i react react-dom react-router-dom -S

npm i @babel/preset-react -D　　
  • 修改babel.config.js
module.exports = {

  presets: [

    ...,

    '@babel/preset-react'

  ]

};　　
3.1、小试牛刀
  • 创建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即可看到效果。
4、配置TypeScript
社区已经记录了90%的顶级JavaScript库。这意味着，你可以非常高效地使用这些库，而无需在单独的窗口打开相应文档。可以通过npm来安装使用@types
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

将css独立拆包最大的好处就是js和css的改动，不会影响对方。比如我改了js文件并不会导致css文件的缓存失效。
使用方式也很简单，大家看着文档抄就可以了。
npm i mini-css-extract-plugin -D　　
修改webpack.config.js
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

打包css之后还需要做css代码压缩，这时候需要使用optimize-css-assets-webpack-plugin这个插件，它不仅能压缩css还能优化代码。
npm i cssnano optimize-css-assets-webpack-plugin -D　　
修改webpack.config.js
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

    })

  ],

}　　
优化webpack就介绍到这里，掘金已有很多非常好的优化文章，请自行搜索并实践。

总结

到目前为止，已经成功的自己搭建了一个typescript+react的开发环境。在搭建过程中，还是会踩很多坑的。
世上无难事，只怕有心人。动手试一试，比看半天都要好。
 
 
作者：zhangwinwin
来源： github

从零搭建TypeScript与React开发环境的更多相关文章

  1. 搭建 webpack、react 开发环境（三）

    配置 react-router-dom   我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...

  2. 搭建 webpack、react 开发环境（二）

    配置处理样式文件   到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...

  3. 搭建 webpack、react 开发环境（一）

    基本介绍   Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...

  4. 从零搭建和配置OSX开发环境

    对于每一名开发者来说,更换系统或者更换电脑的时候,都免不了花上不短的时间去折腾开 发环境的问题.我本人也是三番两次,深知这个过程的繁琐.所有,根据我自己以往的经验, 以及参考一下他人的意见,整理一下关 ...

  5. 搭建公司的React开发环境

    记录公司环境搭建 1.安装VSCODE, 安装网上的推荐各种控件2.安装node, yarn, 会自动添加path3.先初始化npm 全部按回车默认. npm init.  初始化yarn: yarn ...

  6. Webpack笔记（二）——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  7. TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建

    1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...

  8. react学习笔记（一）用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

  9. Mac中搭建 iOS 的 React Native 环境

    手把手教你在Mac中搭建iOS的 React Native环境 http://www.cnblogs.com/damnbird/p/6074607.html 准备工作 1.你需要一台Mac电脑..(这 ...

随机推荐

  1. 学习 Gin 问题总结 2020.12.29

    学习 Gin 问题总结 2020.12.29 数据绑定与解析 BindXXX,ShouldBindXXX和ShouldBindWith区别 BindXXX 会自动返回信息,输入无效时,在header写 ...

  2. CentOS安装TensorFlow

    1.升级python 系统自带的python是2.6,不能用,升级到2.7,方法见:http://www.cnblogs.com/stAr-1/p/9055980.html 2.升级python带来的 ...

  3. Linux嵌入式学习-远程过程调用-Binder系统

    Binder系统的C程序使用示例IPC : Inter-Process Communication, 进程间通信RPC : Remote Procedure Call, 远程过程调用 这里我们直接只用 ...

  4. Git 常用命令 【13个命令包含git 90%的操作】

  5. LAMP搭建示例

    lamp介绍 其实就是由Linux+Apache+Mysql/MariaDB+Php/Perl/Python的一组动态网站或者服务器的开源软件,除Linux外其它各部件本身都是各自独立的程序,但是因为 ...

  6. C++编译过程概述

    一 ---导读 想象成工厂要产出一个产品的过程,经过流水线上一步一步,不同的人的操作,然后经过整合,就得到了一个完整可用的产品. 二---编译过程图解 三---在linux中编程详解编译过程 当我们在 ...

  7. 第七章节 BJROBOT 选择区域自主构建地图【ROS全开源阿克曼转向智能网联无人驾驶车】

    1.把小车平放在地板上,用资料里的虚拟机,打开一个终端 ssh 过去主控端启动roslaunch znjrobot bringup.launch 2.在虚拟机端再打开一个终端,ssh 过去主控端启动r ...

  8. mysql 创建[序列]，功能类似于oracle的序列

    参考自菜鸟教程 https://www.runoob.com/mysql/mysql-using-sequences.html 使用函数创建自增序列管理表(批量使用自增表,设置初始值,自增幅度) 第一 ...

  9. maven项目pom.xml解析

  10. rocketmq-cpp-client Visual Studio 2019 编译

    rocketmq-cpp-client Visual Studio 2019 编译 rocketmq-cpp-client 是rocketmq c++版本的 所以我们C++ 开发者使用此项目 构建 获 ...