详解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 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
详解Vue中的Props与Data细微差别
Mar 02 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第一次无法获取cookie问题处理
2014/12/15 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
ExpressJS入门实例
2015/01/14 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
vue $set 给数据赋值的实例
2019/11/09 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
基于Python List的赋值方法
2018/06/23 Python
对Python w和w+权限的区别详解
2019/01/23 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python 求数组局部最大值的实例
2019/11/26 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python自动化操作实现图例绘制
2020/07/09 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
生日邀请函范文
2014/01/13 职场文书
文明寝室标语
2014/06/13 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python