Typescript+React模板搭建（三）
整理于网络
# 一、项目初始化
# 1.1 创建项目
确保安装了
npm install -g typescript
# -S 是--save简写
# -D 是--save-dev简写
# 创建目录
mkdir ts-react && cd ts-react
# 生成package.json、tsconfig.json
npm init -y && tsc --init
# 安装开发工具
npm install-D webpack webpack-cli webpack-dev-server
# 安装react相关
npm install -S react react-dom
# 安装react相关的ts验证包
npm install -D @types/react @types/react-dom
# 安装ts-loader(或者awesome-typescript-loader) 这两款loader用于将ts代码编译成js代码
npm install -D babel-loader
@前端进阶之旅: 代码已经复制到剪贴板
# 1.2 webpack配置
- 在项目根目录新建一个
build文件夹
mkdir build && cd build && touch webpack.config.js
@前端进阶之旅: 代码已经复制到剪贴板
- 根目录下新建src文件夹，然后在src里新建index.tsx文件作为项目入口
mkdir src && cd src && touch index.tsx
@前端进阶之旅: 代码已经复制到剪贴板
- 编写简单的
webpack配置，只包含entry和output
const path = require('path')
module.export = {
entry: {
app: path.join(__dirname, '../', 'src/index.tsx)
},
output: {
path.join(__dirname, '../', 'dist),
filename: '[name].js
}
}
@前端进阶之旅: 代码已经复制到剪贴板
- 编写
awesome-typescript-loader配置项: 在webpack中的module是专门用来决定如何处理各种模块的配置项，例如本例中的typescript，这里主要用的配置项就是module.rules，而当前只需要简单配置解析.tsx文件类型即可
