React全家桶环境搭建过程详解

本文介绍了React全家桶环境搭建过程详解，分享给大家，具体如下：

环境搭建

1.

2.引入Typescript

安装依赖

新建tsconfig.json

修改webpack.config.js

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

安装依赖

tips:typings-for-css-modules-loader

打包时将样式模块化，我们可以通过import或require引入样式，并且相互不冲突。

demo.less.d.ts //.demo{color:red;} -> export const demo: string; import * as styles from 'demo.less'

修改webpack.config.js

module.exports = {
entry: {
index:'./src/index.js',//add .less
resolve: {
extensions: ['.ts','.jsx','.less','.css']
},//import less modules，name：demodemohash
{
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

创建history

使用

{ return ( ( )}/> ); }

ReactDom.render(

{/**/}

,document.getElementById('root') );

...ES7语法报错

修改.babelrc

5.引入mobx状态管理

使用装饰器语法

修改tsconfig.json

修改.babelrc

源码

Github

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。