详解Webpack+Babel+React开发环境的搭建的方法步骤
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
通过编辑器找到你刚刚所创建的项目文件夹
现在我们来创建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
最后执行启动本地的http服务
python -m SimpleHTTPServer
这个时候你就可以在浏览器输入:http://localhost:8000
如果你能在浏览器里面看到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的环境搭建好了,接下来我们就可以此基础上来进行开发了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 微信最新自定义菜单事件
- 微信JSSDK分享到朋友圈和朋友自定义内容功能实现
- 无线安全渗透测试套件WiFi-Pumpkin新版本发布
- Java使用QQ邮箱给其他邮箱发邮件
- 从wireshark抓包开始学习https
- 用于时间序列预测的Python环境
- Pandoc安装实现Markdown转PDF (CentOS6)
- String类replaceAll方法正则替换深入分析
- 微信硬件平台对接--蓝牙
- 初试git+github(linux环境)
- Raspberry PI Nginx 安装
- 微信支付-Java-SpringMVC基础一些代码支持
- 使用Kafka的High Level Consumer
- 微信公众号发送模板消息 Java实现。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 三种动态控制SAP CRM WebClient UI assignment block显示与否的方法
- TCGA数据库中癌症名称缩写
- CloudFlare自定义节点优化网站
- 什么是SSL?为什么要为WordPress网站使用SSL?
- R语言再保险合同定价案例研究
- SAP CRM附件的技术属性设计原理
- R语言对混合分布中的不可观测与可观测异质性因子分析
- R替换函数gsub
- R语言泊松回归对保险定价建模中的应用:风险敞口作为可能的解释变量
- asp dotnet core 提供大文件下载的测试
- R语言模拟人类生活预期寿命动态可视化动画图gif
- Python遍历字典
- R语言随机森林模型中具有相关特征的变量重要性
- WPF 使用 Direct Manipulation 的方法
- R语言分析负利率下金融市场:负利率和年金价值的变化