超级简单的ts+webpack+react hooks脚手架安装node，这是核心，下载node安装包 node官网，安

随着typescript火爆及在项目中的普及，越来越多的大型项目都会使用ts，那么如何打造一个团队能够使用的脚手架工具呢？那么她来了~~~

第一步，老生常谈

小白看这里（完全小白~~），老司机可忽略

安装node，这是核心，下载node安装包 node官网，安装成功后，打开终端，查看node及npm版本。(我这里安装的node版本是12.16.1的，对应的npm版本为6.13.4)

因为mpm是跟随node一起的，同时你也可以下载nvm 来管理你的node版本 nvm官网

node -v
// v12.16.1
npm -v 
// 6.13.4

第二步，新建项目

随便找一个盘来存放项目

mkdir ts-test && cd ts-test

初始化项目

npm init -y

生成一个package.json文件，包含项目所有信息。

新建各种基本文件及文件夹
1. 新建src文件夹，用来存放业务代码
2. 先在src文件夹中建一个app.js做测试用
3. 新建xx.html， html 模板文件

安装基础包

webpack 三件套

npm i webpack webpack-cli webpack-dev-server -D

新建webpack.config.js 文件，内容如下

const path = require('path');
module.exports = {
	mode: 'development',
  	entry: './src/app.js',    // 入口文件
  	output: {
    	filename: 'bundle.js',    // 打包后的文件名称
    	path: path.resolve(__dirname, 'dist')   // 打包后文件存放的位置
  	}
}

在package.jsonde srcipt 中添加一条语句

"build": "webpack --progress"

// 终端执行，可以看到已成功输出bundle.js
npm run build

以上仅仅是打包了一个js，还是远远不够的，还需要添加html，css，react，ts等...不急，慢慢来...

第三步，HTML登场

让html表现起来

上面已经新建了html文件，那么我们现在就要用起来，安装html插件

npm i html-webpack-plugin -D

新建一个webpack.config.dev.js用于开发环境，内容如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 这里只举例了一个单入口，多入口配置可自行查阅资料
module.exports = {
	mode: 'development',
  	entry: './src/app.js',
  	output: {
    	filename: 'bundle.js',
    	path: path.resolve(__dirname, 'dist')
  	},
  	plugins: [
  	  	new HtmlWebpackPlugin({template: './index.html'})
  	]
}

再在package.json文件中的script增加一条用于执行开发的语句

"start": "webpack-dev-server --config webpack.config.dev.js"

// 执行
npm start

// 浏览器输入：
localhost:8080

// well done

如何在在页面中呈现内容，首先安装以下包： babel-loader 传送门

npm i react react-dom @babel/runtime-corejs3 -S
npm i babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties @babel/plugin-proposal-export-default-from -D

修改app.js文件的内容如下:

 import React from 'react';
 import ReactDOM from 'react-dom';

 function App() {
   return (
     <div className="app">
       webpack typescript
     </div>
   )
 }

 ReactDOM.render(
   <App />,
   document.getElementById('root')
 )

修改webpack.config.dev.js，增加module字段

...省略部分
	module: {
 	rules: [
     	{
           test: /\.(js|jsx)$/,
           use: 'babel-loader',
           exclude: /node_modules/
         }
     ]
 }
...省略部分

新建.babelrc文件，内容如下：

	{
   "presets": [
     ["@babel/preset-env", {"modules": false}], 
     "@babel/preset-react"
   ],
   "plugins": [
     ["@babel/plugin-transform-runtime", {
       "useESModules": true, 
       "corejs": {"version": 3, "proposals": true}
     }],
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-export-default-from"
   ]
 }

运行npm start，成功

特别提醒：这里我们只讲到js，jsx配置，具体的css，cssModules等可以参看各种脚手架合集，喜欢的可以给个小心心哦~

第四步，重点来说说ts的配置

下面的配置不需要用到ts-loader，webpack配置不需要任何修改， tsconfig的作用主要是来规范提示ts写法。打包的时候.ts，.tsx会被@babel/preset-typescript转码，就没法做语法校验了

在上面原有的基础上安装typescript

npm i typescript -g or npm i typescript -D
npm i @babel/preset-typescript -D

tsc --init

会生成一个tsconfig.json文件，我的配置如下tsconfig.json：

  {
    "compilerOptions": {
      "jsx": "react",
      "allowJs": true,
    },
    "exclude": ["node_modules"],
  }

2.修改.babelrc，在presets增加@babel/preset-typescript 其作用

其意思就是将.ts, .tsx 文件转为js文件

若要使用ts-loader，需要安装相应loader，推荐安装

npm i awesome-typescript-loader -D

修改tsconfig.json，为:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "module": "ESNext",
    "target": "ESNext",
    "jsx": "react",
    "allowJs": true,
    "esModuleInterop": true,
    "noUnusedLocals": true,
    "removeComments": true,
    "moduleResolution": "Node",
    "experimentalDecorators": true,
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"],
  "include": ["./src/", "./lib.d.ts"]
}

修改webpack.config.dev.js

... 省略
	 {
        test: /\.(ts|tsx)$/,
        use: 'awesome-typescript-loader',
        exclude: /node_modules/
      }
... 省略

最后

tsc 命令是将.ts，.tsx文件根据tsconfig文件的配置编译成js文件。
webpack 根据其配置进行相应的操作，如果webpack中配置了ts-loader则会先进行.ts转js，在通过babel进行语法转义。