基于webpack接入React包安装

在使用babel的项目中接入React 框架很简单，只需要加入React所依赖的Presets babel-preset-react. 安装react, react-dom, webpack 在项目根目录下执行下面命令，其中--save的含义是项目上线运行所需的包，即生产环境（--save-dev是开发环境所需的包）。

npm install react react-dom --save-dev
npm install webpack --save-dev

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
            /* react DOM*/
    </div>
    <script src="bundle.js"></script>
</body>
</html>

index.js

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

render(
    <div>Hello React!</div>,
    document.getElementById('app')
);

webpack-config.js

webpack.config.js
复制代码
const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    output: {
        path: path.resolve(__dirname, '../dist'), // 输出的路径
        filename: 'bundle.js'  // 打包后文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react'],
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

复制代码这里如果在项目根目录直接进行webpack构建会报错,因为我们使用了react，react是使用jsx语法实现的，而jsx不能直接被浏览器识别和执行，所以这里需要引入Babel库进行转码(babel-preset-react)。

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save
babel-loader: babel加载器
babel-preset-es2015: 支持es2015
babel-preset-react: jsx 转换成js

复制代码在项目根目录下新建json文件.babelrc，将babel的配置单独提取出来。

{ "presets": 
  [ 
    "es2015", 
    "react" 
  ] 
}

来源：oschina

链接：https://my.oschina.net/u/3495544/blog/1921219

标签

react

babel

npm

Webpack

jsx