详解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 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
js编写三级联动简单案例
Dec 21 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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 session 会话处理函数
2016/06/06 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
php unlink()函数使用教程
2018/07/12 PHP
PHP _construct()函数讲解
2019/02/03 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
JS设计模式之惰性模式(二)
2017/09/29 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Python绘制组合图的示例
2020/09/18 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
2014迎国庆标语大全
2014/09/19 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
小学教研工作总结2015
2015/05/13 职场文书
欠条样本
2015/07/03 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP