本文介绍了React全家桶环境搭建过程详解，分享给大家，具体如下：
环境搭建
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
},};
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：demodemo___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?$/,};
entry: {
index:'./src/index.js',//add .less
resolve: {
extensions: ['.ts','.jsx','.less','.css']
},//import less modules，name：demodemo___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
创建history
使用
{
return (
(
{/**/}
,document.getElementById('root')
);
ReactDom.render(
...ES7语法报错
修改.babelrc
5.引入mobx状态管理
使用装饰器语法
修改tsconfig.json
修改.babelrc
