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的核心概念之一,它的基本工作流是将一个文件以字 ...
随机推荐
- MAC TXT文本
Mac系统下.txt格式的纯文本怎么保存? 作者:佚名 字体:[增加 减小] 来源:互联网 时间:06-02 14:29:23 我要评论 Mac系统下.txt格式的纯文本怎么保存?.txt是个用途广泛 ...
- andriod8.1.0源码编译中的一个坑-package com.sun.javadoc does not exist
这里记录编译过程中的一个坑!!! 编译过程中出现了下面的报错 external/doclava/src/com/google/doclava/ClassInfo.java:20: error: pac ...
- ABP进阶教程2 - 组合查询
点这里进入ABP进阶教程目录 更新数据传输对象 打开应用层(即JD.CRS.Application)的Course\Dto\GetAllCoursesInput.cs //Course数据传输对象(查 ...
- BayaiM__MySQL错误对照表
BayaiM__MySQL错误对照表 原创 作者:bayaim 时间:2016-06-16 09:16:29 33 0删除编辑 ------------------------------------ ...
- Django—常见问题解决
让Django项目运行允许外部访问 1.将python manage.py runserver 改为 python manage.py runserver 0.0.0.0:80 或者 python m ...
- 洛谷P2260 [清华集训2012]模积和（容斥+数论分块）
题意 https://www.luogu.com.cn/problem/P2260 思路 具体思路见下图: 注意这个模数不是质数,不能用快速幂来求逆元,要用扩展gcd. 代码 #include< ...
- 第15讲：嵌入式SQL语句(动态SQL)
一.动态SQL概述 1. 静态SQL vs 动态SQL ①动态SQL是相对静态SQL而言的 ②静态SQL特点:SQL语句在程序中已经按要求写好,只需要把一些参数通过变量传递给SQL语句即可 specN ...
- C++学习03_对象
1.类 类决定了一个对象具有什么样的属性功能. class MyFirstClass { }; //跟C++结构情况相似 //类的第一个字母采用大写是一种习惯的上的标准. //与C++结构情况类似 类 ...
- input:file样式怎样修改
问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...
- 2. Go语言—包概念
一.包的概念 和python一样,把相同功能的代码放到一个目录,称之为包 包可以被其他包引用(若包中变量/函数被其他包调用,名需大写) main包是用来生成可执行文件,每个程序只有一个main包 包的 ...