Reactファミリーバケツ環境構築過程

環境構築
1.ゼロからwebpack+react開発環境を構築する
2.Typeescriptの導入

インストール依存

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.co.nfig.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-cs-modules-loader
tips:typings-for-cs-modules-loader
パッケージ化時にパターンをモジュール化して、スタイルをimportまたはrequireで導入できます.互いに衝突しません.

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

webpack.co.nfig.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-routerv 4の導入
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 (
         (
            
        )}/>
    );
}


ReactDom.render(
    
        

            

                
Homes
                
TodoList
            
            
                
                {/**/}
                
            
        
    ,
    document.getElementById('root')
);

... ES 7シンタックスエラー

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-tranform-decorators-legacy
修正.babelrc

{
  "presets": ["es2015", "react", "stage-2"],
  "plugins": ["transform-decorators-legacy"]
}

ソース
Github