美文网首页
Es6环境配置

Es6环境配置

作者: 柠夏z | 来源:发表于2017-10-16 09:10 被阅读0次

建立工程目录:

**先建立一个项目的工程目录,并在目录下边建立两个文件夹:src和dist

src:书写ES6代码的文件夹,写的js程序都放在这里。
dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。

初始化项目

***在安装Babel之前,需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具,进入项目目录,输入下边的命令:

npm init -y
**-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件

package.json


Es6环境配置

将es6转化成es5
*全局安装Babel-cli
在终端中输入以下命令,如果你安装很慢的话,可以使用淘宝镜像的cnpm来进行安装。安装cnpm的方法,大家自己百度吧。

npm install -g babel-cli
npm install -g babel-cli

虽然已经安装了babel-cli,只是这样还不能成功进行转换,如果你不相信可以输入下边的命令试一下。

babel src/index.js -o dist/index.js
babel src/index.js -o dist/index.js

你会发现,在dist目录下确实生产了index.js文件,但是文件并没有变化,还是使用了ES6的语法。因为我们还需要安装转换包才能成功转换,继续往下看吧。


Es6环境配置
Es6环境配置

相关文章

  • ES6 配置运行环境

    本节我们来学习配置 ES6 的 JavaScript 运行开发环境,通过 babel 把 ES6 转码为 ES5 ...

  • ES6 编程风格【上】

    ES6 环境配置 关于es6的详细特性可以看 http://es6.ruanyifeng.com/,这里仅仅是个人...

  • ES6新特性

    ES6 核心特性 [图片上传失败...(image-b01919-1545900229494)] 一、开发环境配置...

  • webpack 学习笔记

    本文主要分为:环境配置使用配置文件CSS 处理ES6 代码编辑文件压缩SASS 处理CSS 与 JS 分离文件处理...

  • 11-29的知识点复习

    es6和node.js都是默认开启严格模式的(不管你想不想开) 目前es6需要配置环境,不然只能在高级浏览器中使用...

  • es6的导入导出-模块化

    想使用es6的导入导出功能不需要配置nodejs环境和webpack环境,直接可以用 导入导出的功能是模块化,使你...

  • Vue+SuperMap iClient for Leaflet

    一、开发环境说明 二、配置引入步骤(采用ES6 import方式) 1、安装依赖包 采用vue-cli3进行vue...

  • Es6环境配置

    建立工程目录: **先建立一个项目的工程目录,并在目录下边建立两个文件夹:src和dist src:书写ES6代码...

  • ES6 如何配置运行环境

    选择一个编辑器 首先我们选择一个编辑器,然后在这个编辑器下配置 ES6 的 JavaScript 运行环境。这里我...

  • Babel-入门

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。 配置文件 Babel的配置...

网友评论

      本文标题:Es6环境配置

      本文链接:https://www.haomeiwen.com/subject/rtirextx.html