手动搭建 Typescript+React+Webpack 脚手架

我们在创建React项目的时,大多都是通过create-react-app来直接npm到本地的已经搭建好的脚手架,直接使用就好了;今天就自己手动搭建Typescript+React+Webpack的脚手架。

(注:

  1. 我是直接使用的Webstorm的Terminal终端,跟系统自带的命令行工具没什么两样
  2. 前提就是装了node.js和npm
  3. 此安装教程不是常规的安装教程,请耐心读完

创建一个空项目(文件夹),使用npm初始化项目

npm install

然后会提示你做一个项目的配置,如图:
1.png
具体的内容我就不解释了,你可以一路回车,直到最后提示你Is this ok(yes),你直接输入yes然后回车就行了;此时你就会发现项目文件夹里面多了个package.json的文件

接下来就安装React和React-dom

npm install react react-dom --save

(注:为了避免全局安装,所以要加上一个--save
2.png

安装webpack和ts-loader

webpack ts-loader --save-dev

(注:--save-dev是安装上线使用的依赖)
3.png

安装运行服务器lite-server

npm install lite-server --save-dev

4.png

安装webpack

npm install webpack

5.png
装完之后就要在项目里新建一个webpack.config.js的文件,并写下如下代码:

module.exports = {
  entry: './src/index.tsx',
    output: {
        filename: "app.js"
    },
    devtool: "sourec-map",
    resolve: {
        extensions: [".ts",".tsx",".js"]
    },
    module: {
        rules: [
            {test:/\.tsx?$/,loader:"ts-loader"}
        ]
    }
};

注释:

  1. entry:入口文件
  2. output:输出文件
  3. devtool:用于调试的工具,我这里用的是sourec-map
  4. resolve:要解析的文件类型
  5. module:模块;现在新版的webpack使用的是rules,以前用的是loaders,然后在rules里面写上正则,作用就是使用之前安装的ts-loader去变异tsx文件

安装Typescript

npm install typescript --save-dev

6.png
我们安装的包都会放在node_modules文件夹里面,并在在package.json文件里的devDependencies都能够找到.
7.png

配置tsconfig.json

首先先初始化tsc:

tsc init

之后会在项目里面生成一个tsconfig.json的文件,打开,写下如下代码:

"exclude": [
    "node_modules"
  ]

8.png
这句话的作用是不编译node_modules文件下面的东西,然后再加上一句话,让React能够编译Ts文件:

"jsx": "react"

9.png
这个时候一些编辑器会报错,提示找不到入口文件,这是正常的,因为我们还没有写代码;

接下来就是在项目里面新建一个src的文件夹,并在里面新建一个index.tsx的文件,然后再项目目录新建一个index.html文件,并写上一段html:
10.png
里面引入的js文件先别管,接下来向下看;

在index.tsx写点代码

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import {Hello} from './component/HelloWorld'

ReactDOM.render(
   <Hello name="React" />, document.getElementById('root')
);

这个时候可能会报很多错,不管,向下看,
再在src文件夹里面新建一个component文件夹,再在component文件夹里面新建一个HelloWorld.tsx文件,并写下如下代码:

import * as React from 'react'
import '../index.css'

interface HelloPro {
    name: string
}

export class Hello extends React.Component<HelloPro,{}>{
    render(){
        return (
            <div className="app">
                Hello, Welcome to the world of {this.props.name}
            </div>
        )
    }
}

(这里会有一大堆错,不管。。。。)
这里的代码就不再解释了,就是定义了一个接口,定义了一个类

之后就能够运行吗?当然不行,因为我们没有做类型管理

类型管理

npm install --save-dev @types/react @types/react-dom

11.png
装完之后就会发现HelloWorld.tsx的文件里的语法错误是不是就没有了?

接下来,打开package.json文件,在scripts里面写上如下代码:

"start": "lite-server",
"build": "webpack --mode production"

12.png

现在是不是就可以运行了呢,跑一下试试。。npm start。。。。Duang!一大堆报错;要不再试试npm run build?这个时候回提示你安装webpack-cli,当然yes了,

之后你就会发现可以啦,是不是?这个时候你可以结束运行再用npm start去跑一下,看是不是成功了呢???
13.png

文章如有不对的地方,请联系作者改正,谢谢!

仅有 1 条评论
  1. 4567890

    写得什么玩意

添加新评论

icon_mrgreen.gificon_neutral.gificon_twisted.gificon_arrow.gificon_eek.gificon_smile.gificon_confused.gificon_cool.gificon_evil.gificon_biggrin.gificon_idea.gificon_redface.gificon_razz.gificon_rolleyes.gificon_wink.gificon_cry.gificon_surprised.gificon_lol.gificon_mad.gificon_sad.gificon_exclaim.gificon_question.gif