標籤：
In this lesson we‘ll setup a simple build process for converting our ES6 React components into ES5 using Babel and Webpack
Install:
npm i --save react react-dom
npm i -D babel-loader babel-core babel-preset-es2015 babel-preset-react
npm i -g babel webpack webpack-dev-server
Create files:
touch App.js main.js webpack.config.js
Webpack.config.js:
module.exports = { entry: ‘./main.js‘, output: { path: ‘./‘, filename: "index.js" }, devServer: { inline: true, port: 3336 }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: ‘babel‘, query: { presets: [‘es2015‘, ‘react‘] } } ] }};
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Setup</title></head><body><div id="app"></div><script src="index.js"></script></body></html>
App.js:
import React from ‘react‘;export default class App extends React.Component { render() { return ( <span>Hello React</span> ) }}
main.js:
import React from ‘react‘;import ReactDOM from ‘react-dom‘;import App from ‘./App‘;ReactDOM.render(<App />, document.getElementById(‘app‘));
Run:
webpack-dev-server
[React Fundamentals] Development Environment Setup
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
