详解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 相关文章推荐
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
详解vue 组件注册
Nov 20 Vue.js
JS中箭头函数与this的写法和理解
Jan 14 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
广告显示判断
2006/08/31 Javascript
javascript 闭包疑问
2010/12/30 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python字符串中的单双引
2017/02/16 Python
python实现xlsx文件分析详解
2018/01/02 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
python爬取指定微信公众号文章
2018/12/20 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
先进事迹演讲稿
2014/09/01 职场文书
介绍长城的导游词
2015/01/30 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python