当前位置:首页 > 网站技术 > 前端技术 > 正文内容

es6入门之环境搭建

binadmin2020-06-20前端技术94

话不多说,首先我也是先学习了然后再总结的。

es6入门——es6环境的搭建

(原文有个错误,把cmd说成是控制台,以至于评论区有个新手没理解到意思,控制台是浏览器的console,cmd是输入命令行执行的面板)


开始前要了解一点,浏览器是不支持直接编译es6的语法

所以要借助babel转译成es5.


首先新建文件夹(建之前还是要安装node噻,然后在命令行打印“node -v”,输出版本号就好了)

在里面新建一个src文件,用来存放js文件,建一个index.js

然后新建一个dist文件,用来存放转换为es5语法的js文件,建一个index.js

还建立一个index.html文件,src下新建一个index.js文件,在index.html中加入引入"dist/index.js"

QQ浏览器截图20200608141747.png


然后对项目进行初始化,使用cmd cd切换到该目录下,输入"npm init -y"即生成一个package.json文件,


然后开始环境的搭建:


先输入”npm install babel-cli -g"对bebal进行全局安装,如果网速较慢,可以使用cnpm


接着再输入"npm install --save-dev babel-preset-es2015 babel-cli“,将babel-preset-es2015和babel-cli进行本地安装,安装成功后就会在package.json文件中有记录,如图:



接着新建一个.babelrc文件,在文件中输入:


{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}


为了可以简化输入语句,可以在package.json文件中的scripts属性进行更改:


{
  "name": "lian",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

这样在cmd运行npm run build 即可编辑es6,把html文件拖到浏览器打开控制台就可以看见输出的js代码

QQ浏览器截图20200608141920.png

标签: ecmascript6
分享给朋友:

相关文章

在nuxt中使用localStorage

在nuxt中使用localStorage

摘至: https://zhuanlan.zhihu.com/p/82481387使用 localStorage 进行缓存,操作比 cookie 更简单,且存储空间更大,用 vue.js 使...

Vue2.x基础知识

Vue2.x基础知识

1.vue绑定值与字符串拼接四种方法 A  :title="`字符串${变量}`"    B  :titl...

计算机编码规范之ASCII码

计算机编码规范之ASCII码

Bin(二进制)Oct(八进制)Dec(十进制)Hex(十六进制)缩写/字符解释0000 00000000x00NUL(null)空字符0000 00010110x01SOH(start of hea...

从输入URL到页面加载完成的过程(全程梳理)

从输入URL到页面加载完成的过程(全程梳理)

注:文章来源于CSDN博主「Junli_1413」的原创文章https://blog.csdn.net/qq_20901397/article/details/79982679主干流程:一、从浏览器接...

5种常见网页自动跳转方法

5种常见网页自动跳转方法

利用HTML标记(META中的REFRESH属性)用HTML标记,就是用META的REFRESH标记,举例如下:<meta http-equiv=refresh content="10...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信