React全家桶环境搭建过程详解
程序员文章站
2022-04-29 16:29:24
本文介绍了react全家桶环境搭建过程详解,分享给大家,具体如下:
环境搭建
1.
2.引入typescript
安装依赖
npm i -s...
本文介绍了react全家桶环境搭建过程详解,分享给大家,具体如下:
环境搭建
1.
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 .less resolve: { 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"] }
源码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。