react怎么编译成HTML的,前端的那点事 - react - react 编译

使用 es6 来编写 react.js , 用 webapck 结合 babel 去编译 es6 与 jsx，然后打包

安装 babel 环境

// 本地环境依赖

npm install babel --save

// babel 命令行工具

npm install babel-cli --save

// 使用 babel 进行代码 api 转码编译

npm install babel-core --save

// 模块加载

npm install babel-loader --save

npm install babel-plugin-add-module-exports --save

// 代码填充，让不支持的运行环境可以使用高级语法

npm install babel-polyfill --save

// 把 es6 的代码编译为 es5, 因为很多 es6 的语法 在浏览器上无法运行

npm install babel-preset-es2015 --save

npm install babel-plugin-transform-es2015-classes --save

// 解析 react jsx 语法, 把 jsx 编译为 js

npm install babel-preset-react --save

// 预设 es6 的那个版本

npm install babel-preset-stage-2 --save

// 在 babel 称为助手，yige 运行时环境，自动去加载需要依赖的模块

npm install babel-runtime --save

npm install babel-plugin-transform-runtime --save

配置 babel 环境

在项目根目录下创建 .babelrc 文件，此文件是描述 babel 如何编译 js 代码的

{

"presets": [

"es2015",

"react",

"stage-2"

],

"plugins": [

"add-module-exports",

"transform-runtime",

"transform-es2015-classes"

]

}

安装 react 环境

// 安装 react 模块

npm install react --save

// react 虚拟 dom

npm install react-dom --save

安装 webpack 环境

// 本地 webpack 环境

npm install webpack --save

// 监听文件是否发生变化 配合 webpack --watch

npm install chokidar --save

webpack 配置

var path = require("path");

var fs = require("fs");

var webpack = require("webpack");

var staticRoot = path.resolve(__dirname, "./react");

var outputPath = path.resolve(__dirname, "./build");

var babelrc = JSON.parse(

fs.readFileSync(path.resolve(__dirname, "./.babelrc"), 'utf8')

);

module.exports = {

entry: {

//入口文件

// key 为输出时的名字

// value 时本地物理文件

app: staticRoot + '/client.jsx' //需要打包的文件

},

output: {

path: outputPath, //输出目录

publicPath: staticRoot, //引用目录 本地物理路径

filename: '[name].build.js', //输出名称

sourceMapFilename: '[file].map' //Source Map

},

module: {

loaders: [

{

test: /\.js[x]?$/, //检测以什么结尾的文件

exclude: /node_modules/, //排除某文件夹

loader: ['babel'], //使用什么模块来编译

//配置

query: babelrc

}

]

},

//配合模块使用

resolve: {

//注意：配置的路径必须是绝对路径

root: [ staticRoot ],

//配置别名

alias: [],

//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名

extensions: ['', '.js', '.jsx'],

},

plugins: [

//提前加载模块

//在使用中可以不在使用 var xxx = require("xxxx");

new webpack.ProvidePlugin({

'React': 'react',

'ReactDOM': 'react-dom',

})

]

};