尝试在 es6 中使用 Class 关键字和模块答案

【问题标题】：trying to use the Class keyword and modules in es6尝试在 es6 中使用 Class 关键字和模块
【发布时间】：2015-07-16 03:34:36
【问题描述】：

我在一本书中找到了这段代码：

class Animal(){
    constructor(){
        this.legs = 4;
        this.eyes = 2;
        this.say = "Huh?"
     }
     speak(){
         console.log(this.say)
     }
}

上面应该是定义类的正确方法，但我不能在 FF 或 chrome 中使用它。我得到了SyntaxError: class is a reserved identifier

我也在玩模块。我放了

export let hello = "hello from the first module" 在 firstModule.js 文件中

比我说的

import {hello} from "firstModule"
console.log(hello)

在 main.js 文件中

然后我将<script type="text/javascript" src="main.js"></script> 放入索引文件中，我得到了SyntaxError: modules are not implemented yet

我想我在使用 es6 语法时遇到了问题，我认为如果使用 babeljs 就可以解决问题

我希望你能在这个 babel “试试看”link 中看到我试图使用 class 语句，但我收到了一个错误 Unexpected token (1:15)。

怎么能用es6的东西呢？我以为 babel 应该把 es6 翻译成 es5。我做错了什么？

我也把<script type="application/javascript;version=1.7">放到了html文件里

【问题讨论】：

你真的是在使用 babeljs 将 ES6 代码转译成 ES5 代码，然后在浏览器中运行 ES5 代码吗？或者你想直接在浏览器中运行 ES6 代码？你提到两者 - 你想做什么？
这里是Mozilla’s progress on implementing class syntax，这里是Chrome’s progress。
我尝试使用 ES6 代码并将其输出到浏览器。我正在研究为什么它不起作用，我听说 bablejs 采用 ES6 并将其转换为 Es5 代码，以便我可以在浏览器中使用它进行测试。 OKM，下面说我在问题的课堂部分遇到的困难是因为我放了括号。我从 bable 网站获得了 es5 代码。但是如果我删除编辑器中的括号。它仍然不起作用。所以我想我应该复制并粘贴它。
“输出到浏览器”是什么意思？顺便说一句，它是“巴别塔”，就像巴别塔一样。

标签： javascript class ecmascript-6 babeljs

【解决方案1】：

应该是class Animal 而不是class Animal()。
要在浏览器支持您使用的内容之前在浏览器中使用 ES6 代码，您需要 babel 将代码转换为 ES5。比如in browser

<script type="text/babel" src="main.js"></script>

要玩转模块，您可以使用babel-node 尝试它们，或者可以使用 webpack 打包 js 文件并将结果加载到浏览器中。

【讨论】：

我不确定 transpile 是什么意思。但如果我想使用 es6，我可以制作 js 文件并 npm install bablejs 并在 windows 上的 cmd 提示符中放入一些代码，它会将 js 文件转换为 es5，然后我会将其上传到服务器。如果是这种情况，我猜最好的方法是在babeljs.io/docs/usage/cli 上使用某种方法......“输出到标准输出”是什么。在那个页面上是什么意思？是babel script.js 我为翻译文件而提供的cmd。对不起。我是新手。
@user2537537 是的，这是一种方式。通过使用babel script.js > build/script.js，您可以在build/script.js 中获得浏览器就绪的ES5 代码。通常，人们会使用一些构建系统，例如gulp 或webpack 来帮助调用 babel 并构建更适合发布的打包 JS。查看babeljs.io/docs/setup中的方法
标准输出en.wikipedia.org/wiki/…