详解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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
three.js 如何制作魔方
Jul 31 Javascript
JavaScript 实现页面滚动动画
Apr 24 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP程序员编程注意事项
2008/04/10 PHP
浅谈php自定义错误日志
2015/02/13 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
bpython 功能强大的Python shell
2016/02/16 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
DBA的职责都有哪些
2012/05/16 面试题
党风廉政建设调研报告
2015/01/01 职场文书
创业计划书之服装
2019/10/07 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python