(React16, TypeScript3, Webpack4, Babel7) => ( <App / >)
React16.x+TypeScript3.x+Webpack4.x+Babel7.x 搭建基础骨架
:: 2019 ::
这篇指南将会教你如何将TypeScript3和React16还有webpack4结合在一起使用。
如果你正在做一个全新的工程，可以先阅读这篇React16快速上手指南。
否则，我们假设已经在使用Node.js和npm。
初始化项目结构
让我们新建一个目录。 将会命名为 myproject，但是你可以改成任何你喜欢的名字。
mkdir myproject
cd myproject
我们会像下面的结构组织我们的工程：
myproject/
├─ dist/
└─ src/
└─ components/
TypeScript文件会放在src文件夹里，通过TypeScript编译器编译，然后经webpack处理，最后生成一个bundle.js文件放在dist目录下。 我们自定义的组件将会放在 src/components文件夹下。
初始化工程
通过npm init -y初始化项目，生成package.json文件
在本地安装 webpack4，安装 webpack-cli
npm install webpack webpack-cli --save-dev
装webpack4各种常用加载器、插件和工具
npm i clean-webpack-plugin html-webpack-plugin --save-dev
npm i webpack-dev-server webpack-merge --save-dev
npm i file-loader url-loader style-loader css-loader babel-loader --save-dev
在本地安装 babel7 和它一些核心的包
项目安装@babel/core @babel/preset-env @babel/preset-react，同时安装@babel/polyfill
npm i @babel/core @babel/preset-env @babel/preset-react --save-dev
npm i @babel/polyfill --save
先来看一下主要的包，babel 7 对于包进行了一些简化。
- @babel/cli: 用于执行相应命令
- @babel/core: 核心包，将 js 代码分析成 AST
- @babel/preset-env: 包含 es6+ 的语法转换规则，如箭头函数、const 等
- @babel/polyfill: es6 内置对象和函数的垫片，如 Promise、Array.from 等
- @babel/plugin-transform-runtime: 防止 polyfill 污染全局变量
- @babel/runtime: 与 @babel/plugin-transform-runtime 配套使用
安装 React16
npm i react react-dom react-router-dom --save
安装 TypeScript3
npm i typescript @types/node @types/react @types/react-dom -D
npm i @types/webpack awesome-typescript-loader source-map-loader -D
说明
其它配置看项目目录结构描述。
git clone .
npm install
npm run dev
npm run build
目录结构描述
├── README.md // README
├── docs // for github page
├── config // 配置
│ ├── webpack.base.conf // 配置控制
│ ├── webpack.dev.conf // 开发环境
│ └── webpack.prod.conf // 生产环境
├── src // 应用入口
│ ├── assets
│ ├── components
│ ├── style
│ ├── App.tsx
│ ├── index.html
│ └── index.tsx
├── package.json // package.json
└── tsconfig.json // tsconfig.json
MIT License
Copyright (c) 2019 The Art of ReactJs