webpack4 babel 篇
demo 代码点此，如果对 babel 不熟，可以看一下babel 7 简单指北。
webpack 使用 babel 来打包使用 es6 及以上语法的 js 文件是非常方便的，可以通过配置，将 es6 转化为 es5.
start
准备个空文件，执行如下命令：
npm init -y
npm i -D webpack webpack-cli
npm i -D babel-loader @babel/core
然后创建一个 dist 文件夹，创建一个 html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack4 babel 篇</title>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
根目录下创建 webpack.config.js，配置 webpack:
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
],
},
devtool: 'source-map',
// 出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}
为了转化 es6 代码，要安装 babel 插件:
npm i -D @babel/preset-env @babel/polyfill
然后在根目录下创建 babel 配置文件 .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"targets": {
"browsers": ["last 2 versions", "ie >= 10"]
}
}
]
]
}
然后在根目录下创建 index.js:
const add = (x, y) => {
return new Promise((resolve, reject) => {
resolve( x + y);
});
}
add(1, 2).then(res => console.log(res));
打包
终端执行打包：
npx webpack
打开 dist 目录下的 bundle.js，可以看见代码已经转为 es5，搜索 promise，会发现加上了 promise 的 polyfill：
// bundle.js
...
var add = function add(x, y) {
return new Promise(function (resolve, reject) {
resolve(x + y);
});
};
add(1, 2).then(function (res) {
return console.log(res);
});
...
访问 index.html，console 也打印正常。
防止全局污染
如果是写第三方库或者框架，使用 polyfill 可能会造成全局污染，所以可以使用 @babel/plugin-transform-runtime 防止全局污染。
安装：
npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime @babel/runtime-corejs2
修改 babel 配置：
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
打包即可。
备注
这个主要是 babel 的配置。
webpack4 babel 篇的更多相关文章
- webpack4 plugins 篇
demo 代码点此,篇幅有限,仅介绍几个常用的. start 什么是 plugins ? While loaders are used to transform certain types of mo ...
- webpack配置babel篇
babel-polyfill & babel-runtime & babel-preset-env babel-core babel-core 的作用是把 js 代码分析成 ast , ...
- nuxt 项目安装及环境配置
babel篇 在package.json中添加--exec babel-node 如果需要编译es6,我们需要设置presets包含es2015,也就是预先加载es6编译的模块. 如果需要编译es7, ...
- TGL站长关于常见问题的回复
问题地址: http://www.thegrouplet.com/thread-112923-1-1.html 问题: 网站配有太多的模板是否影响网站加载速度 月光答复: wp不需要删除其他的模板,不 ...
- webpack4.0各个击破（6）—— Loader篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破（6）—— Loader篇【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- Webpack4篇
[Webpack4篇] webpack4 打包优化策略 当前依赖包的版本 1 优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件 ...
- webpack4.x下babel的安装、配置及使用
前言 目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁.功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善.为了实现兼容 ...
- Webpack4.0各个击破（6）loader篇
目录 一. loader综述 二. 如何写一个loader 三. loader的编译器本质 [参考] 一. loader综述 loader是webpack的核心概念之一,它的基本工作流是将一个文件以字 ...
随机推荐
- 被 GANs 虐千百遍后，我总结出来的 10 条训练经验
一年前,我决定开始探索生成式对抗网络(GANs).自从我对深度学习产生兴趣以来,我就一直对它们很着迷,主要是因为深度学习能做到很多不可置信的事情.当我想到人工智能的时候,GAN是我脑海中最先出现的一个 ...
- ABP进阶教程8 - 自定义按钮
点这里进入ABP进阶教程目录 在功能按钮区增加一个自定义按钮 - Add(创建课程) 添加按钮 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views ...
- 对于隐藏性质的非标准的动态 id 的下拉框，如何定位和选中
今天,在页面上碰到一个非 select 标签的下拉框,打算进行定位和模拟选中. <input aria-invalid="false" autocomplete=" ...
- Python基础之猜数游戏
例题一:猜数游戏.在程序中预设一个0~9之间的整数,让用户通过键盘输入所猜的数,如果大于预设的数,显示“遗憾,太大了”:小于预设的数,显示“遗憾,太小了”,如此循环,直至猜中该数,显示“预测N次,你猜 ...
- conda基础命令
1.首先在所在系统中安装Anaconda.可以打开命令行输入conda -V检验是否安装以及当前conda的版本. 2.conda常用的命令. 1)conda list 查看安装了哪些包. 2)con ...
- GitHub 上优秀的开源SLAM repo (更新中)
GitHub 上优秀的开源SLAM repo (更新中) 欢迎 watch/star/fork 我们的 GitHub 仓库: Awesome-SLAM, 或者follow 项目的主页:Awesome- ...
- hadoop自带RPC的使用 代码demo
引入的三方包 <dependency> <groupId>org.apache.hadoop</groupId> <artifactId>hadoop- ...
- CF-1155 D.Beautiful Array
题目大意:现在有一个数列,还有一个数字x,你可以将这个数列中的一段连续子序列同时乘以这个数字x(当然也可以不乘),然后问你最大子段和是多少 做法:dp,你懂的 #include<iostream ...
- 数据仓库006 - MySQL 5.6.x - Linux最佳生产环境离线部署
一.离线安装包 文件准备 这里以mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz为例,记一次MySQL 5.6.x 的生产环境离线部署过程.使用SecureCRT连接 ...
- HTML连载21-序选择器上
解释CSS3 中新增的选择器中最具有代表性的就是序选择器,大致可以分为两类: (1)同级别的第几个(2)同类型的第几个 先写一个公共代码 <body> <h1>优秀</h ...