webpack随笔2--编译ES6/ES7
一、Babel
1、安装babel
Bable-loader:
babeljs.io
babel最新版:npm install babel-loader@8.0.0-beta.0 @babel/core
常规:npm install --save-dev babel-loader babel-core
2、针对语法 Babel Presets :规范的一个总结 es2015 es2016 es2017 env:包含上面这几种
babel-preset-react
babel-preset-stage 0 - 3
npm install @babel/preset-env -save-dev //对应上面的最新版本
npm install babel-preset-env -save-dev //对应上面普通版本 targets:目标==》指定哪些语法编译 哪些语法不编译
targets.browsers //指定浏览器
targets.browsers:"last 2 versions"
targets.browsers:">1%"
browserslist
can i use
3、babel-loader preset-env
(1)初始化
npm init
npm install babel-loader@8.0.0-beta.0 @babel/core
(2)配置webpack.config.js
module.exports = {
entry:{
app:'app.js'
},
output:{
filename:'[name].[hash:8].js'
},
module:{
rules:[
{
test:/\.js$/,
use:'babel-loader',
exclude:'/node_modules'
}
]
}
}
(3)下载preset-env
npm install @babel/preset-env --save -dev
//指定presets
use:{
loader:'babel-loader',
options:{
loader:'babel-loader',
presets:['@babel/preset-env']
},
exclude:'/node_modules'
} //targets:根据你指定的目标选择哪些语法编译和不编译
targets.browsers //可以指定浏览器
targets.browsers:"last 2 versions"
targets.browsers:">1%"
//数据来源
browserlist
can i use //输入css 或是js 看浏览器的支持程度
(4)配置preset参数
//给preset指定参数
presets:[
['@babel/preset-env',{
targets:{
browsers:['1%','last 2 version']
}
}]
]
(5)在app.js里写些例子
//在app.js
let fun = () =>{}
const num = 45
let arr [1,2,4]
let arrB=arr.map(item=>item*2) console.log(new set(arrB))
(6)打包
//打包
webpack
3、针对函数和方法:Babel Polyfill Babel Runtime Transform
(1) Babel Polyfill 垫片:全局垫片 为应用准备
npm install babel-pollyfill -save
import "babel-polyfill" //使用
(2) Babel Runtime Transform 局部垫片 为开发框架准备
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
.babelrc //使用 在根目录下
有些babel处理不了的新的方法 Generator Set Map Array.from Array.prototype.includes
(3)pollyfill的使用
例子 在上面的app.js 里
import‘babel-pollyfill’
function* func(){} (4)runtime的使用
在.babelrc里
{
"presets":[
["@babel/preset-env",{
"targets":{
"browswers":["last 2 version"]
}
}]
],
"plugins":["transform-runtime"]
}
npm install @babel/runtime --save
npm install @babel/plugin-transform-runtime --save-dev
webpack随笔2--编译ES6/ES7的更多相关文章
- 前端工程化-webpack(babel编译ES6)
最新版安装与普通安装 使用babel-loader编译ES6,需要遵循规范,安装babel-presets 规范列表 对应babel-loader,babel-preset安装最新版和普通版: pre ...
- webpack 编译ES6
虽然js的es6是大势之趋,但很多浏览器还没有完全支持ES6语法,webpack可以进行对es6打包编译 需要安装的包有 npm init // 初始化 npm install babel-loade ...
- webpack 兼容低版本浏览器,转换ES6 ES7语法
ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...
- webpack如何编译ES6打包
前言:随着ES的普及我们越来越多的开始使用ES6的语法了,当然也随着mvvm框架的流行少不了js模块化,那js模块化又有那些呢 在很早的时候大家都用的命名空间,现在也有人用(库名.类别名.方法名) 后 ...
- babel使用入门以及使用webpack+babel来"编译"你的JS代码
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- webpack4 系列教程(二): 编译 ES6
今天介绍webpack怎么编译ES6的各种函数和语法.敲黑板:这是webpack4版本哦, 有一些不同于webpack3的地方. >>> 本节课源码 >>> 所有课 ...
- 使用gulp和bable实现实时编译ES6代码
这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...
- gulp打包js多个文件夹并压缩混淆,编译ES6语法,及多个import依赖由一个入口打包成一个cdn
感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件g ...
随机推荐
- Vue 中引入echarts
安装依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org ...
- Python学习第八课——函数
python函数(def) def test(x): # x为形参 y = x + 20 return y # def:定义函数的关键字 # test:函数名 # ():内定义参数 # x+=1:代码 ...
- KDE Plasma 5.17 即将发布
导读 Plasma 5.17上个月达到了beta版本,而下周将发布Plasma 5.17.0版本!KDE桌面的大更新只有几天了.因此,开发人员一直在整理它,同时也集思广益讨论Plasma 5.18应该 ...
- drugs
1. 摘录:未来简史 2. 毒品禁药扫盲 3. 毒品争议 4. 部分毒品列表 5. 影视作品里常出现的几种毒品 1. 摘录:未来简史 第一章 人类的新议题 幸福快乐的权利 (P36) 人们喝酒是为了遗 ...
- IDEA spring mvc整合mybatis
准备工作 IDEA 2019.3.1 MySql 8.0.17 Tomcat 7.0.9 开始步骤 一.创建一个项目,添加Web支持 点击菜单:File->NEW->Project 选择左 ...
- C# 篇基础知识11——泛型和集合
.NET提供了一级功能强大的集合类,实现了多种不同类型的集合,可以根据实际用途选择恰当的集合类型. 除了数组 Array 类定义在System 命名空间中外,其他的集合类都定义在System.Coll ...
- Day3:关于地形生成
---恢复内容开始--- 今天桃子好像还是没什么动静,不过媳妇倒是有一点见红~ 希望这是马上要出来的前兆了~ 桃子都已经晃点我俩好多回了~ 已经都快习惯来她这个狼来了的征兆了~ ----------- ...
- List循环添加数据覆盖问题
问题:java开发时,当我们使用List.add();循环添加数据,有时会出现前面添加的数据会被后面覆盖的现象.这是怎么回事尼? 会覆盖数据的代码 package com.boot.test; imp ...
- Python学习笔记之基础篇(三)python 数据类型 int str bool 详谈
python 的数据类型: 1.int:存放 1,2,3 等数据 ,用于数字的运算 2.bool :True, False 用于判断 3.str:字符串,用来存储少量的数据 4.list : 数组的 ...
- 对S7通信的连接的理解以及对比CAN通信协议来理解PLC通讯
对S7通信的连接的理解以及对比CAN通信协议来理解PLC通讯. 对功能块 SFB12 和 SFB13 的R_ID参数的理解 ? 对于同一个数据包.发送方与接收方的R_ID应该相同. 用下图解释 双向连 ...