環境搭建

1.從零開始搭建webpack+react開發環境

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)$/,use: ['url-loader']},{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',},output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},devtool: "source-map",//add .lessresolve: {extensions: ['.ts', '.tsx', '.js', '.jsx', '.less', '.css']},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},//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: /\.(png|svg|jpg|gif)$/,use: ['url-loader']},{test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['url-loader']},{test: /\.(js|jsx)$/,exclude: /node_modules/,use: {loader: 'babel-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}, };

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", "react", "stage-2"],"plugins": ["transform-decorators-legacy"] }

源碼

Github

總結

以上是生活随笔為你收集整理的React全家桶环境搭建过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。