webpack最佳入门实践系列(08)
8.babel相关
8.1.babel是什么?
Babel 是一个 JavaScript 编译器,它使用非常广泛,可以将es6转换成es5,从而在一些不支持es6的浏览器中运行,这意味着你写es6代码的时候就不需要去关心浏览器是否支持es6
点击进入babel中文地址
点击进入babel官方地址
8.2.使用babel
我们新建一个babel-demo的目录来演示bebel的使用,进入到babel-demo目录后,运行命令初始化项目
npm init -y
这条命令的作用是在babel-demo目录下生成一个package.json的文件
接下来,我们需要安装babel-cli
npm install --save-dev babel-cli
babel-cli是命令行工具,安装以后我们就可以在命令行中通过babel命令来转码
安装好后,我们写一段代码来测试一下babel的编译转码功能,在babel-demo目录下新建index.js文件,编写下面代码:
() => console.log("hello nodeing.com")
接下来,通过babel命令去编译index.js
./node_modules/.bin/babel index.js
如果你想每次运行babel的时候都输 ./node_modules/.bin/babel这么一长串命令, 你可以把这个命令配置到package.json中
{"name": "babel-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "./node_modules/.bin/babel index.js"},"keywords": [],"author": "","license": "ISC","devDependencies": {"babel-cli": "^6.26.0"}
}
这个时候,我们通过npm的命令来启动编译
npm run build
运行后的结果,原样输出了index.js中的内容,为什么babel并没有编译我们的index.js文件呢?
原因在于,babel是基于插件的,插件就是提供的一些扩展功能,如果没有告诉babel用哪个插件来做事情,那么babel就不会处理
8.3.babel插件
前面我们讲到,babel是基于插件的,做不同的事情需要不同的插件,这样让babel非常灵活并且强大
点击打开babel插件文档页,中文地址
点击打开babel插件文档页,英文地址
我们去找到transform-es2015-arrow-functions这个插件,点进去查看它的使用,这个插件的功能是帮助我们把es2015(es6)的箭头函数编译成es5代码
下面我们来安装这个插件
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
安装好以后,我们需要在babel-demo目录下新建.babelrc文件,这个文件就是babel的配置文件,我们在这个配置文件中增加配置项
{"plugins": ["transform-es2015-arrow-functions"]
}
然后,运行npm命令,查看效果
npm run build
运行结果:
(function () {_newArrowCheck(this, _this);return console.log(1);
}).bind(this);
接下来,我们去修改index.js 文件,增加其他的es6语法
() => console.log(1)class demo{}
再去执行npm run build命令,得到的效果也是原样输出,这个原因和前面我们遇到的一样,它需要安装另一个插件才能让babel工作起来,要不然就什么都不做
npm install --save-dev babel-plugin-transform-es2015-classes
安装好后,同样需要去修改.babelrc文件,增加配置
{"plugins": ["transform-es2015-arrow-functions","transform-es2015-classes"]
}
接下来就可以运行npm run build命令来查看效果了
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }(function () {return console.log(1);
});let demo = function demo() {_classCallCheck(this, demo);
};
以上就是babel的插件使用方法
8.4.babel的preset
通过插件的学习,我们知道了babel要去解析转换es6语法,需要安装对应的插件,我们只是使用到了两个es6的语法就装了两个插件,当我们需要使用很多es6语法的时候,那就需要装非常多的插件,这样显得非常麻烦,那么有没有简便点的方法呢?
babel通过preset来解决我们上面提出的问题,preset叫做预设,意思就是说预先设置一些常用的语法配置,把一批常用的相关的插件打包来满足我们的开发,例如:我们处理es6语法的时候,我们就把和es6相关的语法插件打包在一起,组成一个预设,这个预设叫做es2015,所以,当我们下载一个es2015这个预设的时候,本质上就是去下载一批和es6相关的语法插件,这样我们就不用每次去下载配置插件了
安装preset-es2015
npm install babel-preset-es2015 --save-dev
安装好后,需要去修改.babelrc配置文件
{"presets": ["es2015"]
}
最后,通过npm run build命令,查看编译结果
8.5.webpack和babel
让我们把目录切换到webpack-demo目录,修改webpack-demo下的index.js加入下面一段es6代码
// 测试es6是否被编译成es5
()=>console.log("hello nodeing!!!")
然后运行命令查看结果
npm run dev
在打包出来的app.js文件中查看到,我们写的es6代码原样输出,webpack并没有把es6代码编译成es5
要让es6代码被编译,我们需要借助babel的力量,这里我们需要安装babel-loader和babel-core以及处理es6语法的预设,babel-loader的作用就是将es6代码送给babel-core处理,babel-core就是babel工作的核心api
安装babel-core和babel-loader以及处理es6的预设
npm install babel-loader babel-core babel-preset-es2015 --save-dev
在webpack-demo目录中新建.babelrc文件,增加babel配置
{"presets": ["es2015"]
}
接下来需要在webpack.config.js文件中增加配置项
在rules规则数字中增加下面代码
{test: /\.js$/,use:['babel-loader']
}
运行npm run dev命令把index.js打包成app.js,在app.js中我们查看到,原来的es6代码已经成功转换成es5代码了
// 测试es6是否被编译成es5
(function () {return console.log("hello nodeing!!!");
});
8.6.优化babel-loader
当我们写这个正则表达式 (/.js$/) 的时候,表示所有js文件都会被送babel-loader加载,然后由babel-core处理一边,这里包括我们安装的很多第三方包,你会发现node_modules文件夹下会有很多的js文件,但是这些js文件已经由开发者打包好了我们可以直接使用的,并不需要我们再去处理一遍,因此,如果babel-loader再去处理的话,会浪费太多的时间,导致webpack打包编译很慢,我们现在需要优化它。具体的做法是排除不需要再次编译的,让babel-loader只处理我们开发的源文件,因此,我们需要修改webpack.config.js中的配置
{test: /\.js$/,use:['babel-loader'],exclude: path.resolve(__dirname, 'node_modules')
},
其中,exclude: path.resolve(__dirname, 'node_modules') 这条语句表示排除node_modules这个文件夹,因为这个文件夹下放的都是第三方包,并不需要我们再次用babel去编译了
再次运行npm run dev去打包的时候会发现已经快很多了
转载于:https://www.cnblogs.com/nodeing/p/8808803.html
webpack最佳入门实践系列(08)相关推荐
- android ndk 界面开发教程,AndroidStudio NDK开发最佳入门实践
AndroidStudio NDK开发最佳入门实践 网上一些介绍AndroidStudio NDK入门的教程,感觉都不是很完整和全面,也没有告诉初学AndroidStudio NDK的同学们一些需要注 ...
- es6+最佳入门实践(10)
10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator ...
- Ajax+Node.js前后端交互最佳入门实践(05)
5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用 数据交互,可以从服务器获取 ...
- Ajax+Node.js前后端交互最佳入门实践(04)
4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...
- Ajax+Node.js前后端交互最佳入门实践(01)
1.Node.js简介 1.0.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...
- es6+最佳入门实践(8)
8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...
- 【Python百炼成魔】魂圣初入Python之Python最佳入门实践
专栏介绍: 注: 专栏介绍,只出现在一个新的专栏的第一篇文章中,后续会逐渐完善专栏介绍,变成一篇单独文章,用于介绍专栏更新的内容和后续的写作计划. [ Python百炼成魔]专栏 ,讲述少年莫阳,为拿 ...
- STM32入门实践系列——GPIO输入输出(模拟摩斯密码)
任务要求 通过GPIO的输入输出功能或独立按键输出一串摩斯密码(数字0~7之间的莫斯密码),输入口接收,并翻译出来,对应8盏 led 的亮灭. 对应的摩斯密码与数字关系如下: 实现思路: 通过GPIO ...
- ElasticSearch最佳入门实践(一)什么是ElasticSearch
ElasticSearch ElasticSearch是一种分布式.高可用.高性能.可伸缩的搜索和分析系统. 什么是搜索 百度:比如我们想搜索任何信息的时候,就会上百度搜索一下.例如找一部自己喜欢的电 ...
- 最佳实践系列:前端代码标准和最佳实践
最佳实践系列:前端代码标准 @窝窝商城前端(刘轶/李晨/徐利/穆尚)翻译于2012年 版本0.55 @郑昀校对 isobar的这个前端代码标准和最佳实践文档,涵盖了Web应用开发的方方面面,我们翻译了 ...
最新文章
- 收藏 | 深度学习在计算机视觉领域的应用总结
- JSPServlet(1)
- 将军令:数据安全平台建设实践
- 计算机处理器采用多核,电脑的CPU的多核很有用吗?
- python yield用法举例说明
- endnote x9打开闪退_最新最全!Endnote X9完美使用方法
- 【输入法】Rime-中州韵 基本设置 附:官方定制指南
- R语言︱ 数据库SQL-R连接与SQL语句执行(RODBC、sqldf包)
- linux gpio-led
- Java Swing的进化
- mysql数据库计算全部女生_数据分析mysql入门到精通(1)
- Linux看视频不卡的,Ubuntu 8.04下安装电视卡看电视
- 深度学习中的几个概念
- Cocos Creator三消小游戏(TS 01版)
- 股权-公司治理的至高点,如何合理运用股权(融人、融资、融市场) 张明若
- Unity 学习 Tilemap
- 在线的图片颗粒化效果实现
- Android Studio 4.2 中Button的Backgroud背景设置默认为蓝紫色且无法修改的问题,及Button控件中英文字母全部默认显示为大写的解决方法
- 《C语言小程序篇---1》——实现一个“富婆通讯录“(超详细)
- week11——实验(月模拟题3:CSP201609 03)
热门文章
- LSTM+attention代码原理详解
- 如何调试神经网络参数
- mysql-8.0.16-winx64详细安装教程
- 2021-06-14 七大参数,四种拒绝策略
- python3.7保存不了_Python3.7 traceback捕获打印和保存异常
- mysql 程序编码_MySql编码
- 网站后台开发 java_Java前后台开发
- chainmaker 区块中最大交易数 block_tx_capacity设置 区块大小 区块容量
- 2020-07-05
- linux 显示目录的大小不一样,linux目录大小显示不实时问题