长风破浪会有时
直挂云帆济沧海

从0开始搭建react+ts,后台管理系统应用

如果您想要搭建一个基于ts的react的应用,那么就开始执行吧~

npm init

(输入您的项目信息npm init -y可以省掉默认配置的选择)
引入webpack以及创建webpack配置文件

npm install webpack typescript ts-loader

touch webpack.config.js

对webpack进行简单配置

const path = require('path');module.exports = {
  entry: 'src/app.tsx', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 定义输出目录
    filename: 'webpack.bundle.js'  // 定义输出文件名称
  }
};

新建src目录,新增app.tsx文件
更新pageage.json,以webpack执行命令

"scripts": {  "dev": "./node_modules/.bin/webpack --config webpack.config.js"}

接入react相关包

npm install react react-dom react-router-dom

更新入口文件app.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './views/Index';
const ADMIN_CONTAINER = document.getElementById('admin-container');
if(!ADMIN_CONTAINER){
    throw new Error('当前页面不存在<div id="admin-container"></div>节点');
}
ReactDOM.render(<Index />, ADMIN_CONTAINER);

新建src/Index/index.tsx文件

import React from 'react';
export default class Index extends React.Component {
    constructor(props:any) {
        super(props);
    }
    render() {
        return (<div>欢迎来到首页</div>);
    }
}

在根目录创建public/index.html

<!DOCTYPE html>
<html>
<head>
    <title>阿峰哥用ts+react创建后台管理系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
    <div id="admin-container"></div>
</body>
</html>

解析ts文件,打包加入模板文件中的方法

(如果是js,就安装babel-loader,@babel/core,@babel/preset-env,@babel/preset-react

npm install babel-loader@8 @babel/core @babel/preset-env @babel/preset-react 

1.babel-loader:使用Babel转换ts依赖关系的Webpack加载器, 简单来讲就是webpack和babel中间层,允许webpack在遇到ts文件时用bable来解析
2.@babel/core:即babel-core,将ES6代码转换为ES5。7.0之后,包名升级为@babel/core。@babel相当于一种官方标记,和以前大家随便起名形成区别。
3.@babel/preset-env:即babel-preset-env,根据您要支持的浏览器,决定使用哪些transformations / plugins 和 polyfills,例如为旧浏览器提供现代浏览器的新特性。
4.@babel/preset-react:即 babel-preset-react,针对所有React插件的Babel预设,例如将TSX转换为函数.
)

npm install html-webpack-plugin

html-webpack-plugin:将ts代码通过script注入到html中
更新webpack.config.js文件

  const HtmlWebPackPlugin = require('html-webpack-plugin');
   resolve: {
        extensions: ['.js', '.ts','.tsx', '.json'],
    },
    devtool: 'source-map',// 打包出的js文件是否生成map文件(方便浏览器调试)
    module: {
        rules: [
          {
            test: /\.ts$/, // 匹配.ts文件
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader'
            }
          }
        ]
    },
    plugins: [    new HtmlWebPackPlugin({
      template: 'public/index.html',
      filename: path.resolve(__dirname, 'dist/index.html')
    })
  ]
  
    
根目录下创建并配置.babelrc文件

{"presets": ["@babel/preset-env", "@babel/preset-react"]}

根目录添加tsconfig.json

{
    "compileOnSave": false,
    "buildOnSave": false,
    "compilerOptions": {
      "baseUrl": ".",
      "outDir": "build",
      "module": "esnext",
      "target": "es6",
      "jsx": "react",
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "lib": ["es6", "dom"],
      "sourceMap": true,
      "allowJs": true,
      "rootDir": "src",
      "forceConsistentCasingInFileNames": true,
      "noImplicitReturns": true,
      "noImplicitThis": true,
      "noImplicitAny": false,
      "importHelpers": true,
      "strictNullChecks": true,
      "suppressImplicitAnyIndexErrors": true,
      "noUnusedLocals": true,
      "skipLibCheck": true,
      "paths": {
        "@/*": ["./src/*"]
      }
    },
    "include": ["src/*"],
    "exclude": ["node_modules", "build", "public"]
  }
  
 配置 webpack-dev-server,webpack-dev-server可以极大的提高我们的开发效率,通过监听文件变化,自动更新页面
 
 npm install webpack-dev-server
 
 更新package.json 
 
 "dev" : "webpack-dev-server --config webpack.config.js --open"
 
 webpack.config.js添加
 
 devServer: {
        hot: true, // 热替换
        contentBase: path.join(__dirname, 'dist'), // server文件的根目录
        compress: true, // 开启gzip
        port: 4444, // 端口
    },
    
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // HMR允许在运行时更新各种模块,而无需进行完全刷新
        new CleanWebpackPlugin(),//清除dist
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: path.resolve(__dirname, 'dist/index.html')
        })
    ]
 
 好了,现在就可以热更新了。
 
 引入redus
赞(4) 打赏
未经允许不得转载:阿锋哥前端开发经验分享 » 从0开始搭建react+ts,后台管理系统应用
分享到: 更多 (0)

几百块就能做营销型企业网站?

查看详情

可怜可怜作者吧

支付宝扫一扫打赏

微信扫一扫打赏