环境搭建
2.引入Typescript
- 安装依赖
npm i -S @types/react @types/react-dom
npm i -D typescript awesome-typescript-loader source-map-loader
- 新建tsconfig.json
- {
- "compilerOptions": {
- "outDir": "./dist/","sourceMap": true,"noImplicitAny": true,"module": "commonjs","target": "es5","jsx": "react"
- },"include": [
- "./src/**/*"
- ]
- }
- 修改webpack.config.js
- // webpack.config.js
- const path = require('path');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- const webpack = require('webpack');
- module.exports = {
- entry: {
- index:'./src/index.js',},output: {
- filename: 'bundle.js',path: path.resolve(__dirname,'dist')
- },devtool: "source-map",// Add '.ts' and '.tsx' as resolvable extensions.
- resolve: {
- extensions: ['.ts','.tsx','.js','.jsx']
- },module: {
- rules: [
- {
- test: /\.css$/,use: ['style-loader','css-loader']
- },{
- test: /\.(png|svg|jpg|gif)$/,use: ['url-loader']
- },{
- test: /\.(woff|woff2|eot|ttf|otf)$/,{
- test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
- loader: 'babel-loader'
- }
- },// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
- {
- test: /\.tsx?$/,loader: "awesome-typescript-loader"
- },]
- },plugins: [
- new HtmlWebpackPlugin({
- title: 'production',template: './index.html'
- }),new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin()
- ],devServer: {
- contentBase: './dist',hot: true
- },};
3.引入less并支持import less modules
- 安装依赖
npm i -D less less-loader
npm i -D typings-for-css-modules-loader
tips: typings-for-css-modules-loader
打包时将样式模块化,我们可以通过import或require引入样式,并且相互不冲突。
- //demo.less -> demo.less.d.ts
- //.demo{color:red;} -> export const demo: string;
- import * as styles from 'demo.less'
- <DemoComponent className={styles.demo} />
- 修改webpack.config.js
- // webpack.config.js
- const path = require('path');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- const webpack = require('webpack');
- module.exports = {
- entry: {
- index:'./src/index.js',//add .less
- resolve: {
- extensions: ['.ts','.jsx','.less','.css']
- },//import less modules,name:demo__demo___hash
- {
- test: /\.less/,use: [
- 'style-loader','typings-for-css-modules-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&namedExport&camelCase&less!less-loader'
- ]
- },{
- test: /\.tsx?$/,};
4.引入react-routerv4
npm i -S react-router-dom
- 创建history
- import { createHashHistory } from 'history';
- export default createHashHistory();
- 使用
- import React from 'react';
- import ReactDom from 'react-dom';
- import * as styles from "./index.less";
- import history from './helpers/history';
- import {Router,Route,Switch,Redirect,Link} from 'react-router-dom';
- import Hello from "./router/Hello";
- import TodoList from "./router/TodoList";
- const PrivateRoute = ({ component: Component,...rest}) => {
- return (
- <Route {...rest} render={props => (
- <Component {...props}/>
- )}/>
- );
- }
- ReactDom.render(
- <Router history={history} >
- <div className={styles.wrap}>
- <ul>
- <li><Link to="/">Homes</Link></li>
- <li><Link to="/todo">TodoList</Link></li>
- </ul>
- <Switch>
- <Route exact path="/" component={Hello}/>
- {/*<Route path="/demo" component={Demo}/>*/}
- <PrivateRoute path="/todo" component={TodoList} />
- </Switch>
- </div>
- </Router>,document.getElementById('root')
- );
-
...
ES7语法报错
npm i -S babel-preset-stage-2
修改.babelrc
- {
- "presets": ["es2015","react","stage-2"],}
5.引入mobx状态管理
npm i -S mobx mobx-react
- 使用装饰器语法
修改tsconfig.json
- "compilerOptions": {
- "target":"es2017",//fix mobx.d.ts error
- "experimentalDecorators": true,"allowJs": true
- }
npm i -D babel-plugin-transform-decorators-legacy
修改.babelrc
- {
- "presets": ["es2015","plugins": ["transform-decorators-legacy"]
- }