Babel & React

一、安装Babel

npm i -D babel-plugin-transform-runtime // 减少冗余代码
npm i -D babel-preset-env // 根据需求选择不同的Plugins或Presets
npm i -D babel-core babel-loader // webpack接入Babel必须依赖的模块

Babel执行编译文件的过程中，会从项目根目录下的.babelrc文件中读取配置。.babelrc是一个JSON格式的文件。

二、安装react

npm i -D react react-dom // 安装react基础依赖
npm i -D babel-preset-react // 安装Babel完成语法转换所需的依赖

安装react依赖后，修改.babelrc配置文件，加入React Presets:

{
    "presets": [
        "react"
    ]
}

三、入口文件 main.jsx

import * as React from 'react';
import { Component } from 'react';
import { render} from 'react-dom';

class Button extends Component {
    render() {
        return (<h1>Hello, webpack</h1>)
    }
}

render(<Button />, window.document.getElementById('app'));

四、配置文件 webpack.config.js

const path = require('path');

module.exports = {
    entry: './main.jsx',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './')
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: ['babel-loader']
            }
        ]
    },
    devtool: 'source-map'
}

Typescript & React

一、安装typescript

npm i -D typescript awesome-typescript-loader

二、配置文件 tsconfig.json

TypeScript官方提供了能将TypeScript转换成JavaScript的编译器。我们需要在当前项目的根目录下新建一个用于配置编译选项的tsconfig.json文件，编译器默认会读取和使用这个文件。

{
    "compilerOptions": {
        "module": "commonjs", // 编译出的代码采用的模块规范
        "target": "es6", // 编译出的代码采用es的哪个版本
        "sourceMap": true, 
        "importHelpers": true, // 避免代码冗余
        "jsx": "react" //开启jsx，支持react
    },
    "exclude": [
        "node_modules"
    ]
}

三、入口文件 main.tsx(同上)

四、配置文件 webpack.config.js

const path = require('path');

module.exports = {
    entry: './main',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            }
        ]
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    }
}