师父要我基于ES6开发,但是目前的浏览器暂不完全支持所有新语法特性,所以我需要将ES6编译为ES5。这里选择的是webpack
1、安装webpack
npm install webpack -g
npm install webpack --sava-dev
2、安装react、babel
npm install --sava react react-dom
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --sava-dev
3、webpack.config.js
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件项
plugins:[commonsPlugin],
//页面入口文件配置
entry: {
index : './src/js/startup.js'
},
//入口文件输出配置
output:{
path:'./js',
filename: '[name].bundle.js'
},
// externals: { //排除构建文件外
// 'react': 'React'
// },
module: {
//加载器配置
loaders:[
{
test: /\.css$/,loader: 'style-loader!css-loader'
},
{
test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'
},
{
test: /\.js$/, loader: 'babel-loader', query:{
presets:['es2015','react']
}
},
{
test: /\.jsx$/, loader: 'babel-loader!jsx-loader?harmony'
}
]
},
resolve: { extensions: ['', '.js', '.jsx'] }
}
4、entry.js
1 'use strict';
2 import React from 'react';
3 import ReactDOM from 'react-dom';
4
5 class Demo extends React.Component {
6 render(){
7 return (<div>hello react</div>)
8 }
9 }
10 React.render(<Demo />,document.getElementById("aaa"));
之后每次在修改完代码之后,只要在node命令行中输入 webpack即可编译。