搭建一个es6的开发环境

jcc 发布于2019-08-22 13:50 / 298人阅读

摘要：前提是你已经安装了手动创建一个工作目录以下是的内容在目录下创建一个这里写我们的代码接下来我们需要把语法编译成我们浏览器所识别的语法文件，那就用到我们的神奇在安装之前我们要先初始化一下项目全局安装输入以下命令此时文件中就有的依赖了你以

1.前提是你已经安装了node,npm
2.手动创建一个工作目录 dist,src,index.html
以下是index.html的内容

3.在src 目录下创建一个index.js,这里写我们的es6代码

class Car{
    constructor(maker,price){
        this.maker=maker;
        this.price=price;
    }

    getInfo(){
        console.log(this.maker+"costs"+this.price);
    }
}

var car1=new Car("me",100);
car1.getInfo();

var car2=new Car("he",100000);
car2.getInfo();

4.接下来我们需要把es6语法编译成我们浏览器所识别的语法es5文件，那就用到我们的神奇 babel,在安装babel之前我们要先初始化一下项目 npm init -y

5全局安装babel-cli
输入以下命令：cnpm install -g babel-cli

此时package文件中就有babel的依赖了

你以为安装babel-cli就完事了吗，你可以运行babel src/index.js -o dist/index.js
你会发现，确实在dist下面生成了一个index.js文件，但是还是es6语法啊

来，我们再安装一个转换包
cnpm install --save-dev babel-preset-es2015 babel-cli 安装完成之后我们的json文件就有依赖了，
touch .babelrc执行这个命令来创建一个文件，这个文件里面书写如下代码

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

好了，此时再去执行刚刚那个命令 babel src/index.js -o dist/index.js
你会发现我们的es6代码已经转化成es5代码了

我们每次执行那么长的命令是不是有点太麻烦啊，我们现在来修改一下pakage.json文件

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

现在我们运行 npm run build 就可以啦

云服务器 GPU云服务器 java开发环境的搭建 php开发环境的搭建 java 开发环境的搭建开发环境搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92510.html

搭建es6开发与非开发环境babel-browser

摘要：前言最近打算把应用到项目中，但是如何在开发环境浏览器端直接运行已经发布一段时间了，现在大部分是在环境运行，或者通过编译之后运行。主要实现用户能够在浏览器上直接运行语法。前言最近打算把es6应用到项目中，但是如何在开发环境（浏览器端）直接运行es6？es6已经发布一段时间了，现在大部分是在node.js环境运行，或者通过babel编译之后运行。babel-browser主要实现用户能...

selfimpr 2019-08-20 17:38 评论0 收藏0
webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
ES6-开发环境搭建（1）

摘要：全局安装本地安装转码规则安装完成后，我们可以看一下我们的文件，已经多了选项。直接在线编译提供一个在线编译器，可以在线将代码转为代码。古语有云：君子生非异也，善假于物；工欲善其事，必先利其器。由于有些低版本的浏览器还是不支持ES6语法，学习ES6，首先要学会搭建一个基本的ES6开发环境，利用工具，把ES6的语法转变成ES5的语法。 1、使用Babel把ES6编译成ES5 1...

android_c 2019-08-23 15:21 评论0 收藏0
如何搭建es6开发环境

摘要：安装此过程没有难点，略过下载完成后可以通过和来查看是否安装成功以及版本后安装新建一个目录项目名称进入该项目，然后一路回车即可。 node.js安装此过程没有难点，略过下载完成后可以通过node -v和npm -v来查看是否安装成功以及版本后 webpack 安装新建一个目录(项目名称), 进入该项目，npm init, 然后一路回车即可。(会生成一个package.json...

OldPanda 2019-08-23 14:26 评论0 收藏0
手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog

摘要：更新日志更新完成静态页面原型修复使用的正确姿势更新添加静态页面更新添加使用方法请戳我主要作用就是在你开发环节在后端同学还未开发完成的情况下，提供一个。底下评论说是标题党，或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么？我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码，教大家用我所提到的技术栈搭建一个blog，我的出发点就是这么简单...

weapon 2019-08-20 14:15 评论0 收藏0