Webpack+Babel+React环境搭建

前言

我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之前也讲过其他的前端框架,如 gulp+webpack,准确的说这不是一个框架,只是项目组织的形式而已。

Webpack+Babel+React环境搭建

安装Webpack

关于Webpack的介绍这里不讲解,大家可以看之前的讲解webpack介绍

npm install webpack -g
  • 1
  • 1

创建一个项目

创建一个名叫learn-webpack项目,并进去项目目录。

mkdir learn-webpack 
cd learn-webpack
  • 1
  • 2
  • 1
  • 2

Webpack+Babel+React环境搭建 
接下来我们来创建2个文件:app.js和index.html,我们在也没上输出一个”Hello World”, 
app.js:

document.querySelector('#app').innerHTML = 'Hello World!';
  • 1
  • 1

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn-webpack</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

然后在终端执行如下命令:

webpack ./app.js ./dist/bundle.js
  • 1
  • 1

最后执行启动本地的http服务,我们这里用Python

python -m SimpleHTTPServer
  • 1
  • 1

然后我们访问:http://localhost:8000就可以看到效果了。

webpack文件配置

实际上每个项目下都应该包含一个webpack.config.js,用来告诉Webpack需要做些什么,这个我们之前文章也说过。

module.exports = {
  entry: "app.js",
  output: {
    path: __dirname+"/dist",
    filename: "bundle.js"
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

接下来我们在终端运行命令,看看是不是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译结果一样呢,答案是肯定的。

webpack
  • 1
  • 1

注: 
entry:指定打包的入口文件

  • 单个文件打包为单个输出文件,直接写该文件的名字,例如:entry:”main.js”
  • 多个文件打包为单个输出文件,将文件名放进一个数组,例如:entry:[‘main.js’,’xx.js’]
  • 多个文件打包为多个输出文件,将文件名放入一个键字对,例如:entry: {a:’main.js’,b:’xx.js’} 
    output:配置打包结果 
    path为定义输出文件夹,filename为打包结果文件的名称,如果指定打包入口文件为上面的1、2种情况,filename里面直接跟你想输出的文件名。若为第3种情况filename里面需写成[name].文件名.js,filename里面的[name]为entry中的键。

监听变化自动打包

当我们在不停的对代码进行变动的时候,为了不修改一次然后又手动去进行打包一次,可以使用webpack的watch功能。这也算是webpack的一个黑科技,以前做后端的时候必须重新部署,这个是很蛋疼的。

webpack --watch 或者 webpack -w
  • 1
  • 1

或者我们可以直接在配置代码里面把watch设置为true。

module.exports = {
  entry: "app.js",
  output: {
    path: __dirname+"/dist",
    filename: "bundle.js"
  },
  watch: true
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Babel配置

Babel 是一个 JavaScript 编译器。使用它可以将ES6的语法转换为ES5的语法,以便在现在有的环境执行之前的代码。 
首先安装basel。

npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev
  • 1
  • 1

执行安装完成后需要将之前的webpack.config.js修改为:

module.exports = {
  entry: "./app.js",
  output: {
    path: __dirname+"/dist",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['','.coffee','.js']
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

现在就能在文件里面以ES6的语法进行代码编写,如在app.js加入:

var func = str => {
  console.log(str);
};
func('Hello Babel!');
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

我们再次运行,如果看到输出,就说明配置成功了。这里有关Loader的知识和配置就不讲究了,大家可以网上补补。

与React结合

终端输入以下代码对react和react-dom进行安装:

npm install react react-dom --save
  • 1
  • 1

安装Babel针对React的预设插件:

npm install babel-preset-react --save-dev
  • 1
  • 1

由于我们增加了react的预设插件,所以需要对webpack.config.js进行修改。将module -> loaders下面的query修改如下:

query: {
    presets: ['es2015','react']
}
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

接下来我们创建一个hello.js.

import React from "react";

class Hello extends React.Component{
  render() {
    return (
      <div>
          Hello, World!
      </div>
    )
  }
}

export default Hello;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在app.js做一下配置:

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";

ReactDOM.render(
  <Hello />,
  document.querySelector('#app')
);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

哈哈哈,这里如果大家做过React Native的,这里是不是感觉很亲切,只不过React Native还是用的npm在做管理。我们同样启动服务在看看,如果看到Hello World!就说明环境配置成功。

上一篇:Linux有问必答:如何更新过期版本的Ubuntu


下一篇:【个人学习JAVA---学后的梳理】三、浅纳Java的数据类型