webpack 编译ES6
虽然js的es6是大势之趋,但很多浏览器还没有完全支持ES6语法,webpack可以进行对es6打包编译
需要安装的包有
npm init // 初始化
npm install babel-loader@8.0.0-beta.0 @babel/core
npm install install @babel/preset-env --save-dev
npm install babel-polyfill -save
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime -save
安装完了所有的包,可以测试一下
重点引入 import 'babel-polyfill';
|-- app.js
import 'babel-polyfill';
let func = () => {
};
const NUM = 22;
let arr = [1, 3, 4, 5];
let arrB = arr.map(item => item * 2);
console.log(new Set(arrB));
console.log(arr.includes(1));
function* func2() {
}
当然少不了配置webpack.config.js
重点配置 module
module.exports = {
entry: {
app: './app.js'
},
output: {
filename: '[name].[hash:8].js'
},
module: {
rules: [
{
// 正则判断js文件使用
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['>1%', 'last 2 versions']
}
}]
]
}
},
// 除去/node_modules/文件
exclude: '/node_modules/'
}
]
}
}
webpack 编译ES6的更多相关文章
- webpack 编译ES6插件babel-loader
1.安装babel-loader 参考:http://babeljs.io/docs/setup/#installation 进入项目目录执行安装命名: npm install --save-dev ...
- 前端工程化-webpack(babel编译ES6)
最新版安装与普通安装 使用babel-loader编译ES6,需要遵循规范,安装babel-presets 规范列表 对应babel-loader,babel-preset安装最新版和普通版: pre ...
- webpack如何编译ES6打包
前言:随着ES的普及我们越来越多的开始使用ES6的语法了,当然也随着mvvm框架的流行少不了js模块化,那js模块化又有那些呢 在很早的时候大家都用的命名空间,现在也有人用(库名.类别名.方法名) 后 ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- webpack编译流程漫谈
前言 weback在web构建工具的激烈竞争中逐渐脱引而出. 无论是编译速度.报错提示.可扩展性等都给前端开发者耳目一新的感觉.本篇文章是个人对webpack的一点小研究总结. webpack在开发者 ...
- Webpack编译结果浅析
如今Webpack已经是一个不可或缺的前端构建工具,借助这个构建工具,我们可以使用比较新的技术(浏览器不能直接支持)来开发. 你是否好奇你写的代码经过Webpack构建之后会生成什么东西?是否有时调试 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- webpack4 系列教程(二): 编译 ES6
今天介绍webpack怎么编译ES6的各种函数和语法.敲黑板:这是webpack4版本哦, 有一些不同于webpack3的地方. >>> 本节课源码 >>> 所有课 ...
随机推荐
- Struts2——(5)转发和重定向(跨业务模块)
一.重定向redirect(默认是转发dispatcher)和转发的区别? 1.重定向浏览器的网址发生变化(相当于请求了两次),转发浏览器的网址不发生变化(只请求了一次). 2.重定向的过程:发送请求 ...
- JIL 编译与 AOT 编译
JIT:Just-in-time compilation,即时编译:AOT:Ahead-of-time compilation,事前编译. JVM即时编译(JIT) 1. 动态编译与静态编译 动态编译 ...
- WPF动态加载3D 放大-旋转-平移
第一步:新建WavefrontObjLoader.cs using System; using System.Collections.Generic; using System.Windows; us ...
- muduo源代码分析--Reactor在模型muduo使用(两)
一. TcpServer分类: 管理所有的TCP客户连接,TcpServer对于用户直接使用,直接控制由用户生活. 用户只需要设置相应的回调函数(消息处理messageCallback)然后TcpSe ...
- CCD 与 CMOS
窗帘快门与全局快门: 窗帘快门,每次只允许一条缝的光线摄入,因此会呈现自上而下的扫描式拍摄,也就意味着画面上的不同高度,其实拍摄的时间是不同的,也就进一步造成了在高速移动的火车上,如果拍摄窗外的景物, ...
- Leetcode 171 Excel Sheet Column Number 字符串处理
本质是把26进制转化为10进制 A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 class Solution ...
- 构建自己的PHP框架(ORM)
完整项目地址:https://github.com/Evai/Aier 我们选择 Laravel 的 illuminate/database 作为我们的 ORM 包. 在本系列教程里,每一个 Comp ...
- “TNS-03505:无法解析名称”问题解决一例
1. 问题情境 开发人员,在windows新环境ORACLEclient.配置"tnsnames.ora"后,准备连接Linux环境的ORACLE数据库,使用tnsping报TN ...
- linux系统的ssh服务开启方法
操作方法: 1.编辑sshd_config文件 root@linux:~# vi /etc/ssh/sshd_config 2.检查如下配置项: PasswordAuthentication ye ...
- 如何将JPEG缩略图放到LISTVIEW中(delphi listview自绘图形)
http://www.docin.com/p-567657457.html?qq-pf-to=pcqq.c2c http://www.cnblogs.com/snow001x/archive/2008 ...