详解Webpack+Babel+React开发环境的搭建的方法步骤


Posted in Javascript onJanuary 09, 2018

1.认识Webpack

构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS、Babel、Coffeescript、Less/Sass等)作为模块进行编译后进行打包。

2.安装Webpack

要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装。

npm install webpack -g

3.创建一个项目

安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹,当然项目名字你可以起你自己想要的名字。

mkdir learn-webpack && cd learn-webpack

通过编辑器找到你刚刚所创建的项目文件夹

详解Webpack+Babel+React开发环境的搭建的方法步骤

现在我们来创建2个文件:

app.js

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

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>

然后在终端执行

webpack ./app.js ./dist/bundle.js

详解Webpack+Babel+React开发环境的搭建的方法步骤

最后执行启动本地的http服务

python -m SimpleHTTPServer

这个时候你就可以在浏览器输入:http://localhost:8000

详解Webpack+Babel+React开发环境的搭建的方法步骤

如果你能在浏览器里面看到Hello world!那说明你已经成功的利用Webpack把main.js打包并编译到了bundle.js.是不是很简单?

定义一个配置文件

上面的只是对Webpack的使用进行了一些简单的介绍,实际上每个项目下都应该包含一个webpack.config.js,用来告诉Webpack需要做些什么。

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 }
}

现在在终端中运行:webpack

看看是不是和之前输入 webpack ./app.js ./dist/bundle.js 的打包编译结果一样。

entry:指定打包的入口文件

1.单个文件打包为单个输出文件,直接写该文件的名字,例如:entry:"main.js"

2.多个文件打包为单个输出文件,将文件名放进一个数组,例如:entry:['main.js','xx.js']

3.多个文件打包为多个输出文件,将文件名放入一个键字对,例如:entry: {a:'main.js',b:'xx.js'}

output:配置打包结果

path为定义输出文件夹,filename为打包结果文件的名称,如果指定打包入口文件为上面的1、2种情况,filename里面直接跟你想输出的文件名。若为第3种情况filename里面需写成[name].文件名.js,filename里面的[name]为entry中的键。

监听变化自动打包

当我们在不停的对代码进行变动的时候,为了不修改一次然后又手动去进行打包一次。可以使用webpack的watch功能。

webpack --watch 或者 webpack -w

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

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 watch: true
}

4.使用Babel

Babel是什么?Babel 是一个 JavaScript 编译器。使用它可以将ES6的语法转换为ES5的语法,以便在现在有的环境执行。

在终端执行:npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

执行安装完成后需要将之前的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']
 }
}

现在就能在文件里面以ES6的语法进行代码编写,我们来测试一下,在app.js加入:

var func = str => {
 console.log(str);
};
func('我现在在使用Babel!');

ES6支持用箭头方式来定义函数,如果你能在控制台看到“我现在在使用Babel!”的打印文字,说明我们的Babel模块安装成功,可以开始使用ES6进行代码编写了。

loaders项里面表示用来加载这种类型的资源的loader。

test,是一段正则,表示进行匹配的资源类型。

exclude为指定应该被忽略的文件,我们在这儿指定了/node_modules/。

query有2种写法, 一种是直接以字符串形式跟在loader名后:

loader: 'babel-loader?presets[]=es2015

另一种如本文所示:

query: {
 presets: ['es2015']
}

resolve.extensions 用于指明程序自动补全识别哪些后缀,

注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.

5.结合React

前面我们已经对Webpack和Babel进行了配置并做了一些介绍,基本的环境已经搭建好了,现在我们开始在使用React。

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

npm install react react-dom --save

Babel针对React的所有的预设插件

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

由于我们增加了react的预设插件,所以需要对webpack.config.js进行修改。

将module -> loaders下面的query修改如下:

query: {
  presets: ['es2015','react']
}

现在创建一个名为hello.js的文件

import React from "react";

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

export default Hello;

然后将app.js里面的文件修改如下:

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

// var func = str => {
//  console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector('#app').innerHTML = 'Hello World!';

ReactDOM.render(
 <Hello />,
 document.querySelector('#app')
);

如果你能在浏览器里面看到 "Hello, React!",就说明我们已经将Webpack+Babel+React的环境搭建好了,接下来我们就可以此基础上来进行开发了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
react路由配置方式详解
Aug 07 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
微信小程序实现多选功能
Nov 04 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
详解webpack babel的配置
Jan 09 #Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 #Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 #Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 #Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 #Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 #Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 #Javascript
You might like
PHP array_multisort()函数的使用札记
2011/07/03 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
Js的MessageBox
2006/12/03 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
vue内置指令详解
2018/04/03 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
django 微信网页授权登陆的实现
2019/07/30 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python hashlib模块的使用示例
2020/10/09 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
SQL面试题
2013/12/09 面试题
中学生运动会入场词
2014/02/12 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis