`

Sublime Text 之运行 ES6 (基于babel)

 
阅读更多

直接进入正文吧。

安装Babel

 

1
$ npm install -g babel

 

好了,没什么好说的。

创建Sublime Text编译系统

选择菜单Tools –> Build System –> new Build System…

中文版的话是工具 –> 编译系统 –> 新建编译系统…

然后写如下配置:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node $file"]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node $file"]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node $file"]
    }
}

 

接着保存为javascript.sublime-build,保存位置默认即可。

好了,现在你可以写 es6 的代码测试下了,下面是运行效果。

mac 效果

win 效果

运行失败处理

当然也有运行不了的情况,不过大体就分为下面2种。

一. 环境变量

如果执行不了,而是报错,错误类似xxx babel-node: command not found这样的,那么就是环境变量的问题。
只要添加下nodebabel-node的路径到环境变量里。

如果是mac下,我推荐添加path属性到你的javascript.sublime-build里,会更方便。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "path": "/usr/local/bin",
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node $file"]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node $file"]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node $file"]
    }
}

 

就类似这样,mac 下就可以运行了。 win 下安装 node 默认就添加到环境变量了,所以不需要考虑这样的问题。

二. 含有中文路径 (仅win)

当路径里出现中文的时候,win 下什么都不会输出,好奇怪,我也不知道为什么,但 mac 下可以正常运行。
他们唯一区别只是环境字符集一个默认是 gbk,一个是 utf-8,难道只是这个问题?
如果有哪位大神知道,还望指点一二。

三. 中文用户名 (仅win)

如果你的系统用户名是中文的,我指的是系统登录的用户名,如果是中文的,那么怎么都运行不了,奇怪了。
一开始我以为是C:Users用户名AppDataRoamingnpm这个问题,但是我修改了 npm 安装目录,问题依旧。

暂时没想到好的处理方法,最直接有效的解决方法就是换英文用户名。 

分享到:
评论

相关推荐

    sublimetext工具相关资源

    在Sublime Text中,可以通过安装如SublimeLinter、SublimeLinter-eslint这样的插件来实现对JavaScript语法的实时检查,或者使用Package Control安装Babel插件支持ES6以上的语法。 "sublime-text-master"这个文件名...

    SublimeText3开箱即用

    这个“SublimeText3开箱即用”压缩包旨在提供一个预配置的环境,让用户能够立即开始进行React、ES6语法的编程工作,并且内置了Eslint检查工具,确保代码质量。 首先,让我们详细了解一下Sublime Text 3的核心特性:...

    Sublime text 3 JS智能提示插件AndyJS2

    现在,当你在JavaScript代码中输入对象的属性或者方法时,Sublime Text 3会立即显示一个下拉菜单,列出所有可能的选项,包括来自Node.js库、Babel、ES6等的函数和变量。这将显著减少开发者查找和记忆API的时间,提高...

    sublime的react高亮插件

    在Sublime Text中,Babel插件的作用是提供对JSX语法(React组件的主要语法)的高亮支持。 首先,我们需要解决“install packages下载报错”的问题。Sublime Text的Package Control是一个非常方便的插件管理工具,但...

    babel-sublime:具有React JSX扩展的ES6 JavaScript的语法定义

    巴别升华仅支持Sublime Text 3 。 不再支持Sublime Text 2。 具有扩展的语言定义。安装通过找到它作为 。设置为默认语法要将其设置为特定扩展名的默认语法: 打开具有该扩展名的文件, 从菜单中选择View , 然后...

    SublimeText-Settings

    5. **JavaScriptNext - ES6 Syntax**:为Sublime Text添加对ES6语法的支持。 6. **SideBarEnhancements**:增强侧边栏功能,比如右键菜单中的文件操作选项。 **快捷键和命令面板**: Sublime Text支持自定义快捷键...

    sublime插件版自用

    - **Babel**:将ES6+语法转换为ES5,确保浏览器兼容性。 - **VS Code或Atom**:也是流行的代码编辑器,它们也有丰富的插件生态系统,可以与Sublime Text相媲美。 4. **使用技巧** - **快捷键**:掌握Sublime ...

    sublime-text-3-settings:Sublime Text 3 设置

    例如,配置 Node.js 运行环境,或者使用 Babel 转换 ES6+ 代码。 11. **插件管理**: `Package Control` 是 Sublime Text 3 的一个必备插件,它使得安装、更新和管理其他插件变得极其方便。你可以通过它找到并安装...

    JavaScript开发者必备的10个Sublime Text插件

    JavaScript是一种广泛使用的高级编程语言,而Sublime Text是一款流行的跨平台文本和源代码编辑器,它以其速度、简洁性和插件生态系统而闻名。对于JavaScript开发者而言,利用Sublime Text的插件能够极大地提高编码...

    my-sublime-settings:Sublime text 3 的配置

    - 配置可能包括自定义的构建系统,使得运行 JavaScript 代码(如 Babel 转译 ES6 代码,或 Node.js 运行脚本)变得简单。 以上就是关于 "my-sublime-settings" 压缩包文件中可能包含的一些 Sublime Text 3 配置...

    sublime上的JS代码提示1

    - **Babel**:支持ES6及更高版本的JavaScript语法高亮和代码提示。 3. **配置SublimeCodeIntel** 安装SublimeCodeIntel后,需要对其进行配置以支持JavaScript。打开`Preferences > Package Settings > Sublime...

    naomi:JavaScript ES6ES7ES2015ES2016ES2017 +,Babel,FlowType,React JSX,样式化组件,HTML5,SCSS3,PHP 7,phpDoc,PHPUnit,MQL4的Sublime Text增强语法突出显示。 基本:Git配置文件

    Sublime Text 3的增强语法定义。包含什么配色方案糖果人语法CSS 3+; JavaScript; ; ; ; ; 完全支持 ; HTML 5+; MQL4(更新); 开玩笑的快照; PHP 7+(正在更新); SCSS(更新);增强的转到符号Windows或Linux ...

    sublime-text:回购崇高文字的东西

    对于JavaScript,它可以配置为使用Node.js执行脚本,或者配合Babel转换ES6+代码。 3. **插件**:Sublime Text通过Package Control可以安装大量第三方插件,增强其功能。例如,SublimeLinter可以进行实时代码检查,...

    React-Sublime-Contrast:简单的桌面应用程序,可实现出色的文本主题

    3个步骤: 选择Sublime Text主题文件(在“ example”文件夹中有示例) 更改亮度和对比度的值保存结果**它是使用以下技术构建的:** gulp,react es6,babel es7批注,redux,node-webkit 示范影片 ...

    集成常用插件sublime201709最新版

    1.emmet 2.jQuery 3.sublimecodeintel 4.ColorHighlighter显示颜色 ...6.AlignTab正则对其 7.Sidebarenhancements侧边栏 8.DeleteBlankLines 删除空行 9.All Autocomplete-自动补全css...18.Babel es6高亮 19.bootstrap

    JavaScript:ES6新特性:模板字符串与解构赋值

    - **选择代码编辑器**: 选择一个支持ES6语法高亮和代码提示的代码编辑器,如Visual Studio Code或Sublime Text,可以显著提高开发效率。 - 下载并安装你选择的代码编辑器。 - 安装ES6语法支持的插件或扩展。 通过...

    es6-workflow:使用 Gulp、Babel 和 Browserify 使用 ES6 的简单工作流

    使用 Gulp、Babel 和 Browserify 使用 ES6 的简单工作流 安装 进入正确的文件夹并运行npm install 。 要构建应用程序,只需运行gulp 。 您可以“监视”项目以使用gulp watch自动构建代码。 要测试包,您可以在...

    es6-sandbox:沙盒项目用 ES6 做一些测试

    ES6 沙盒 用于测试一些 ES6 代码和示例的小沙盒项目。... subl es6.sublime-project 这将在您的崇高中打开项目。 你现在应该有额外的构建系统Babel compile ,选择它。 现在当你想重新编译你的文件时,只需点击<CMD> 。

    配置H5本地运行环境

    - **文本编辑器**:对于代码编辑,可以选择Visual Studio Code、Sublime Text、Atom等流行的开源编辑器,它们都具有丰富的插件支持和代码提示功能,可以极大地提高开发效率。 2. **本地服务器**: - **Node.js**...

    Ecmascript-Sublime:ECMAScriptJavaScript语法(ES2015-ES2018,JSX,模板突出显示等)具有荒谬的特定范围

    Ecmascript崇高语法Ecmascript / Javascript / ES6 / ES2015 / Babel或您拥有的东西的崇高语法语言定义。 Sublime语法仅在Sublime Text 3.0中可用。 1.6的新功能嵌套语法突出显示多行模板文字的常见用法是嵌入代码段...

Global site tag (gtag.js) - Google Analytics