Babel编辑ES6代码
1.安装babel依赖
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
2.用node初始化一个项目
node init -y
初始化后的package.json长这样
{
"name": "learn2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
在package.json中增加scripts命令
{
"name": "learn2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d dest"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3.配置 babel.config.js
const presets = [
[
"@babel/env",
{
targets: {
edge: "9",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
]; module.exports = { presets };
4.运行
npm run build
Babel编辑ES6代码的更多相关文章
- 使用babel把es6代码转成es5代码
第一步:创建一个web项目 使用命令:npm init 这个命令的目的是生成package.json. 执行第二步中的命令后生成的package.json的文件的内容是: { "name&q ...
- react基于webpack和babel以及es6的项目搭建
项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...
- 如何使用Babel将ES6转码为ES5?
一.前言: 当我们还在沉迷于ES5的时候,殊不知ES6早就已经发布几年了.时代在进步,WEB前端技术也在日新月异,是时候做些改变了! ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器 ...
- 使用babel编译es6
起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...
- es6开发环境搭建,babel 将es6转化成es5
工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...
- 003_webpack 配合babel 将es6转成es5
今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack - ...
- 使用gulp和bable实现实时编译ES6代码
这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...
- webstorn中的vue文件识别es6代码
webstorn中的vue文件识别es6代码 1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => J ...
- Webstorm上面通过babel将es6转化为es5
1.首先创建一个新的文件夹(名为do);2.然后再根目录下面新建一个package.json,只需要写明两个属性即name和version,这个没有必须要和下面我写的一致,可以自行定义. { &quo ...
随机推荐
- MySQL太慢?试试这些诊断思路和工具
MySQL 慢怎么办 如果遇到 MySQL 慢的话,你的第一印象是什么,MySQL 数据库如果性能不行,你是如何处理的? 我咨询了一些同行, 得到了以下反馈: 第一反应是再试一次 第二个反应是优化一下 ...
- MySql查询进阶
1.1 as关键字 用于 给显示结果中字段 或者 表 起别名 select 别名.字段名 from 表名 as 别名 where 条件语句 # 对字段起别名 select id as '编号', na ...
- postMessage解决iframe跨域问题
转:https://juejin.im/post/5b8359f351882542ba1dcc31 https://juejin.im/post/590c3983ac502e006531df11 ht ...
- VIM简单操作
ngg就跳转到第n行行首,G就到结尾 0光标移到当前行行首 $光标移到当前行行末 fx搜索当前行中下一个出现x的地方 yy复制当前行 nyy复制当前行到n-1行 dd删除当前行 ndd删除当前行到n- ...
- yum源遇到的问题
1.在配置CentOS的本地yum源时,所遇到的问题,本地yum设置失败 步骤: vim /etc/yum.repos.d/local.repo 设置本地源 可能会遇到本地源问题,注意使用tab键 ...
- ecshop新版不能在模板文件.dwt和.lbi中直接添加php代码的解决方法
ecshop新版不能在模板文件.dwt和.lbi中直接添加php代码了,为什么呢? 因为直接在模板中加入php函数和代码,没有经过过滤,容易造成安全隐患.程序源码安全是非常重要的. 不过如果有朋友希望 ...
- 动画学习之Music图形绘制
今天来实现一个类似于网易云音乐类似的动态效果,在用网易云音乐听歌时会有一个类似这样的效果,如下: 而咱们这次要实现的效果如下: music图形的绘制: 在实现动画之前先来将静态的图形绘制出来, 如下: ...
- UvaL-7670 上下界可行费用流
#include <iostream> #include <cstdio> #include <cstring> #include <queue> #d ...
- Summer training round2 #7 (Training #23)
A:约瑟夫环 套公式 B:线性筛素数 C:投骰子 概率DP F:有权无向图的生成树(边最大值和最小值只差最小) 直接kruskal G:状压BFS或者双向BFS H:模拟题 I:几何题 J:高斯消元
- struts配置访问后缀为.do,.action,.*
Struts 配置文件的加载顺序 Struts-default.xml---> struts-plugin.xml--> struts.xml--> struts.propert ...