Let's just get to the point .

Environment building

  1. Babel-- At present, browsers are very useful for ES6 The syntax parsing support of is not high , So transcoding is used in compiling , So it's using ES6 Before you install Babel, I encountered some problems during the previous installation, but I didn't record all of them , Now we have to try to reproduce it .

Babel6 The version does not support the use of npm install babel -g Installed , It's divided into several parts

  • babel cli, For the command line
  • babel-core, contain node api
npm install babel-cli -g
npm install babel-core --save-dev

babel You need to install the plug-in manually

npm install babel-preset-es2015

Then type on the command line vim .babelrc Create a folder called .babelrc The file of , And write the following code :

"presets": ["es2015"]

Then save to exit .

2. To configure webpack

You can refer to


First record webpack Use

1、 Create a new folder for our projects

npm init establish package.json Configuration file for

2、 hold webpack Save to local dependency

npm install webpack --save-dev

3、 Single file packaging

newly build js file entry.js It says js Code , And then use

webpack entry.js bundle.js

You can generate a packaged bundle.js, And then put bundle.js Introduced into the page

4、webpack Default packaging js file , If we need to pack css The file needs to be loaded with the corresponding loader

for example :css Need to load loader Yes css-loader and style-loader

npm install css-loader style-loader --save-dev

Then in the entry file entry.js Add

require('style!css! ./style.css'); // hold css Load in as a module

5、 It's too cumbersome to write too many documents , We can use webpack.config.js File defines webpack Configuration of ,

module.exports ={
entry:'./entry.js', // Defined entry file
path: __dirname, // The path to the packaged file
filename: 'bundle.js' // Packed file name
devtool:'source-map', // Generate source-map You can use it in your browser sourcemap See the files we wrote before packing , Easy to debug ( It can be added where the files before packaging need to be debugged debugger; It works like a breakpoint )
module:{ // When used in packaged files loader When we need to write like this
{test:/\.js$/, exclude:/node_modules /, loader: 'react-hot!babel'}, //exclude It means to exclude those files from being packaged
{test:/\.css$/, loader:'style!css'} ]

6、 stay webpack Use in babel

First you have to install it locally babel Dependency needed

npm install babel-loader babel-core babel-preset-es2015 --save-dev

Then add... To the root of the project .babelrc Enter... In the file


Always use webpack+babel+react

First, install the dependency... Locally in the project

npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev

Then install react Of

npm install react react-dom --save

Then configure... In the project .babelrc


Create a new one name.js

" use strict";
import React from "react"; class Name extends React.Component{
hello~~ yang <input />
export {Name as default};

And then in entry.js Configuration in the entry file

"use strict";
import React from "react";
import ReactDOM from "react-dom"; import Name from './name'; ReactDOM.render(
<Name />,

webpack.config.js To configure

module.exports ={
path: __dirname,
filename: 'bundle.js'
{test:/\.js$/, exclude:/node_modules /, loader: 'react-hot!babel'},
{test:/\.css$/, loader:'style!css'} ]

And then in package.json Add a sentence in

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack-dev-server --inline --hot"

Then run it on the console

npm run watch

You can access it in a browser  http://localhost:8080

Use Babel + React + Webpack build Web More related articles on Application

  1. react+webpack Set up the project

    One . Environmental preparation ①node ②npm Two . Begin to build ① Use npm install create-react-app Tools , stay cmd Enter... On the command line : npm install -g create-react-app ② Use life ...

  2. webpack+babel+ES6+react Environment building

    webpack+babel+ES6+react Environment building step : 1 Create project structure Be careful : First create a project directory  react   The name is custom , And then go down to this directory mkdir app // establish app ...

  3. react+webpack+babel Environment building

    [react+webpack+babel Environment building ] 1.react Official documents recommend the use of babel-preset-react.babel-preset-es2015 Two perset. Babel Official documents ...

  4. Detailed explanation Webpack+Babel+React Build the development environment

    1. know Webpack Let's take a look at Webpack, Webpack It's a module packaging tool , Be able to put all kinds of documents ( for example :ReactJS.Babel.Coffeescript.Less/Sass etc. ) ...

  5. The smallest white webpack+react Environment building

    This article is also published in my official account “ My sky ” Starting from scratch , With minimal configuration . Minimum code . The least dependence to build the simplest webpack+react Environmental Science . Recently playing webpack+react+ Mobile , So the first step is to build ...

  6. Use webpack build react project webpack-react-project

    webpack-react-project Use webpack build react project webpack build react project github Source code Please refer to package.json and webpack.conf ...

  7. react Project construction and management webpack To configure

    1, To configure webpack npm install -g webpack                       webpack Of cli Environmental Science npm install -g webpack-dev-se ...

  8. Use webpack build React project

    Those remarks : I believe many developers are getting started react I use it all the time create-react-app or react-slingshot These scaffolding to quickly create applications , When there are special needs , Need modification eject Coming out we ...

  9. webpack build React( Manual build )

    Preface I've been really learning in the dark recently , See what you don't quite understand , They all like to knock by hand 1 To 3 All over ( At the end of the night ), look ,React  be based on webpack build ,react There's an official set of tripod tools , I built it myself. It's really ...

Random recommendation

  1. Linux Next browser-sync Can't start Chrome Solutions for

    The author's environment : OS: Ubuntu Linux Browser: Chrome, Firefox Every time you want to start chrome browser , The system will report an error : browser-sync start -s --dir ...

  2. java Use this Keyword to call this class overload constructor

    Other overloaded constructors of this class can be called in the constructor , You cannot call another constructor with a constructor name , It should use Java specific this(-.) To call . this(-.) The method must appear on the first line of the constructor , Used to call other overload constructors ...

  3. opengl Open local bmp pictures drawing

    Be careful bmp The format of the picture ,32 position ARGB  perhaps 24 position RGB. You must pay attention to how many bits you use . Otherwise, it will display the wrong picture or other mistakes . The code is as follows 32 Bit version #include < ...

  4. C#.NET Split How to use it

    The first method : string s = "abcdeabcdeabcde"; string[] sArray = s.Split('c'); foreach (string i in ...

  5. delphi Realization vip126 email

    This example is TSimpleThread , TSimpleList, IdhttpEx Web simulation (POST) Comprehensive use of . Demo Just write the send , But you can also charge , See the source code for details . ( This source code is written in 2 Years ago , It was not well written at that time , please ...

  6. C Language library function exploration

    1.strlen() Find the string length // Simulation Implementation strlen function #include<stdio.h> #include<stdlib.h> #include<string. ...

  7. VTK Show .vtk Format file

    void ReadandShowVTKFile () { vtkSmartPointer<vtkRenderer > aRenderer = vtkSmartPointer<vtkR ...

  8. I wrote a script to json Switch to md

    use python The script will protocol.json Medium json according to templete.md Template generation , It turns out that protocol.md in Python: #!/usr/bin/python # -*- codi ...

  9. [ daily ] Go Language Bible -Slice Slicing exercises

    1.Slice( section ) Represents a variable length sequence , Each element in the sequence has the same type , One slice Type general writing []T, among T representative slice The type of element in :slice The syntax of is very similar to array , It's just that there's no fixed length ,slice The bottom of ...

  10. Interrupt flag bit IRQF_ONESHOT

    one shot Only once in itself , Combined with the interruption scenario , The interrupt is triggered once , Cannot nest . about primary handler, Of course, it's not nested , But for threaded interrupt han ...