如何使用 es6 编写应用并部署到开发板上


(bsdelf) #1

简介

rap 1.7.0 新增了语法转化功能,启用这项功能后,我们就可以使用 ES6 编写应用,然后直接部署到开发板上。

准备工作

打开终端,依次执行以下命令创建一个新的应用:

mkdir es6-app
cd es6-app
rap init -y

然后我们将“src/index.js”修改如下:

'use strict';

$.ready(error => {
    if (error) {
        console.log(error);
        return;
    }

    setInterval(() => {
        console.log('Enjoy arrow functions!');
    }, 500);
});

显然,上述代码中我们用到了 ES6 中新增的箭头函数,这段代码如果不经过转换,无法部署到 Ruff 开发板上运行。

现在我们用 npm 安装 babel 和 es2015 插件:

npm install babel-cli
npm install babel-preset-es2015

安装完成后,我们可以用以下命令测试 babel 能否正常运行:

node_modules/.bin/babel --presets=es2015 ./src/index.js

如果看到以下输出,说明 babel 能够正常工作:

'use strict';

$.ready(function (error) {
    if (error) {
        console.log(error);
        return;
    }

    setInterval(function () {
        console.log('Enjoy arrow functions!');
    }, 500);
});

修改配置文件

现在让我们修改配置文件,让 rap 在部署时自动调用 babel 执行转换。

用编辑器打开“package.json”,在“ruff”节点中插入以下配置:

"transformation": {
    "src/*.js": [
        [
            "node_modules/.bin/babel",
            "--presets=es2015"
        ]
    ]
}

其中,transformation 表示开启语法转化功能,src/*.js 表示过滤“src”目录下所有后缀名为“js”的文件,并对这一类文件调用 babel 进行转换。

修改完成后,完整的“package.json”如下:

{
    "name": "es6-app",
    "version": "0.1.0",
    "main": "src/index.js",
    "ruff": {
        "boards": {
            "ruff-mbd-v1": "^4.2.0",
            "*": "*"
        },
        "transformation": {
            "src/*.js": [
                [
                    "node_modules/.bin/babel",
                    "--presets=es2015"
                ]
            ]
        },
        "dependencies": {}
    }
}

部署应用

现在我们已经为 rap 开启了 ES6 语法转化功能,只需要执行以下命令就可以将应用部署到开发板上运行了:

rap deploy -s

注意事项

babel 能够将 ES6 的语法翻译成 ES5 兼容的语法,但它对 ES6 中新增的标准库无能为力,例如:SetMapPromiseProxy 等。不过好在已经有第三方库实现了这些功能:core-js

常见问题

  • 打开语法转化功能后,rap 会在应用目录下产生临时文件吗?

    不会。转换内存中完成,不会在应用目录下产生任何临时文件。

  • 能否使用语法转化功能部署 TypeScript 编写的代码?

    可以。但由于 TypeScript 的编译器 tsc 不支持从标准输入(stdin)中读取源代码,可能你需要自己写一个脚本把它封装一下:实现从标准输入中读取源代码,调用 tsc,将转换结果通过标准输出(stdout)打印出来。


有计划支持 es6/7 么?
能否引入其它js SDK
Ruff 1.7 正式发布!可以用 ES6 编写代码了!
(thinkif) #2

发现两个问题,均是在windows平台下,其他平台暂未测试:

  1. 在命令行输入 node_modules/.bin/babel --presets=es2015 ./src/index.js 不生效,需要输入 “node_modules/.bin/babel” --presets=es2015 ./src/index.js 也就是路径用引号包裹才可以。

  2. 部署时提示如下错误:

Failed to transform “src/index.js” with command “node_modules/.bin/babel --presets=es2015”
ERR TypeError: Cannot read property ‘toString’ of null
at [eval]:4837:71
at Array.forEach (native)
at _loop2 ([eval]:4807:53)
at [eval]:4864:29
at [eval]:4881:15
at [eval]:203714:30
at RawTask.call ([eval]:34915:19)
at flush ([eval]:34992:29)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)


(bsdelf) #3

你好,在 Windows 平台上这是一个已知的 bug。
我们会在下个版本中修复这个问题(macOS 和Linux 则没有问题)。


(walfud) #4

ruff test/test.js 的时候如何使用 es6 呢?