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代码的更多相关文章

  1. 使用babel把es6代码转成es5代码

    第一步:创建一个web项目 使用命令:npm init 这个命令的目的是生成package.json. 执行第二步中的命令后生成的package.json的文件的内容是: { "name&q ...

  2. react基于webpack和babel以及es6的项目搭建

    项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...

  3. 如何使用Babel将ES6转码为ES5?

    一.前言: 当我们还在沉迷于ES5的时候,殊不知ES6早就已经发布几年了.时代在进步,WEB前端技术也在日新月异,是时候做些改变了! ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器 ...

  4. 使用babel编译es6

    起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...

  5. es6开发环境搭建,babel 将es6转化成es5

    工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...

  6. 003_webpack 配合babel 将es6转成es5

    今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack - ...

  7. 使用gulp和bable实现实时编译ES6代码

    这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...

  8. webstorn中的vue文件识别es6代码

    webstorn中的vue文件识别es6代码 1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => J ...

  9. Webstorm上面通过babel将es6转化为es5

    1.首先创建一个新的文件夹(名为do);2.然后再根目录下面新建一个package.json,只需要写明两个属性即name和version,这个没有必须要和下面我写的一致,可以自行定义. { &quo ...

随机推荐

  1. vue组件之事件

    自定义事件 通过prop属性,父组件可以向子组件传递数据,而子组件的自定义事件就是用来将内部的数据报告给父组件的. <div id="app3"> <my-com ...

  2. Swift(三)基本运算符

    Swift支持大部分标准C语言的运算符,并且对许多特性进行改进来减少常规编码的错误.除了支持基本运算符外,Swift还提供了2个特殊的运算符,分别是:溢出运算符和区间运算符 首先看下基本运算符 imp ...

  3. v-bind:value="diy" 添加到 <input type="button" /> 中可以,添加到<button />中不可以,diy是data中的数据

    v-bind:value="diy" 添加到 <input type="button" /> 中可以, 添加到<button />中不可 ...

  4. linux使用VNC服务轻松远程安装oracle

    VNC服务在远程服务器上安装oracle,新手安装oracle时总会遇到这样或者那样的问题,下面我就详细解说一下安装过程,其实oracle安装很简单,并不要把他相像的特别复杂. 本环境用:centos ...

  5. python 教程(一)

    必须感慨一下,整了一周多的时间才基本理通顺.自己老是不能静心,方法也不对所以走了很多弯路. 1.建议:一定要先去看官方文档. 下面我们来看一周的成果吧: windows下如何下载并安装Python 3 ...

  6. JS 转化为String的三种方法

    // 1. toString() var num = 8; var numString = num.toString(); console.log(numString); var result = t ...

  7. 权限和ACL访问控制 -01-权限

    权限位 rwxrwrwx:左三位:定义user(owner)的权限,属主权限中三位:定义group的权限,属组权限有三位:定义other的权限,其他的权限 进程对文件的访问权限应用模型:进程的属主与文 ...

  8. CH5101 LICS//hdu5904 LICS

    恭喜我已经正式沦为pj组选手QwQ 标题两个题其实不一样的.这是ch   这是hdu 一.CH上的:裸题,求LICS.n<=3000 经典普及组dp题,题解烂大街了.所以对于这题,只讲细节: $ ...

  9. 树形结构根据最后一位的id匹配整个路径

    function recursionTreeId(_arr, _id) { _arr.forEach(item => { if (item.id === _id) { optionArr.uns ...

  10. HTML5 Geolocation学习

    GeolocationAPI学习,我写的挺枯燥的,直接跳到最后看示例. 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单.请求一个位置信息,如果用户同意,浏览器就会返回位 ...