前端工具 | JS编译器 Brace 使用教程

前端工具 | JS编译器 Brace 使用教程 前言

开发人员一般是在电脑上面安装了IDE完成日常的开发任务，因为项目业务需求，用户想要在线写JS脚本，纯粹的字符串，很“费用户”。

那就需要一个在线JS编译器，需要轻量级，好用，语法高亮，自动换行，语法提示灯功能。

Brace

• 轻量
• 自动提示
• 语法高亮
• 自动换行
• 序号
• 代码高亮
• 自动缩进
• 更换主题
• 搜索和替换支持正则表达式
• 代码折叠

老实说：就是因为monaco不好用才有这篇文章，现在一边重新用brace替换monaco，一边写使用文档。

为什么要换，因为monaco太笨重了，我们使用场景很简单，不深度。

严重拖延了打包的速度，增加包体大小！但是不能否认monaco的强大，当初也是万里挑一。

使用方法

• 官网

[官方文档](https://ace.c9.io/#nav=howto)

[在线demo](https://ace.c9.io/build/kitchen-sink.html)

[github](https://github.com/ajaxorg/ace-builds/blob/master/editor.html)

• 安装

yarn add brace | npm install brace

• 引入

var ace = require('brace')

require('brace/mode/javascript')

require('brace/theme/monokai')

require('brace/ext/language_tools') //很重要 自动补全 提示 必须要它

• 初始化

init(script) {

  let self = this

  var editor = ace.edit('javascript-editor')

  editor.getSession().setMode('ace/mode/javascript') //语言

  editor.setOptions({

    // 默认:false

    wrap: true, // 换行

    autoScrollEditorIntoView: false, // 自动滚动编辑器视图

    enableLiveAutocompletion: true, // 智能补全

    enableBasicAutocompletion: true // 启用基本完成 不推荐使用

  })

  if (script) {

    editor.setValue(script) //需要主动赋值

  } else editor.setValue(this.code)

  editor.getSession().on('change', function() {

    self.$emit('update:code', editor.getValue()) //js 编辑器作为组件 传参给父组件

  })

 }

• html

<template>

  <div id="javascript-editor"></div>

</template>

• css

我是给这个编辑器设置了宽高 以及一些样式的

• 运行效果
  
  

• api

require("lib/ace"); ##引入

editor.setTheme("ace/theme/solarized_dark");##设置模板；引入theme-solarized_dark.js模板文件

editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式

editor.setValue("the new text here");##设置内容

editor.getValue(); ##取值

editor.session.getTextRange(editor.getSelectionRange()); ##获取选择内容

editor.insert("Something cool"); ##在光标处插入

editor.selection.getCursor(); ##获取光标所在行或列

editor.gotoLine(lineNumber); ##跳转到行

editor.session.getLength(); ##获取总行数

editor.getSession().setTabSize(4); ##设置默认制表符的大小

editor.getSession().setUseSoftTabs(true); ##使用软标签.

document.getElementById('editor').style.fontSize='12px';  ##设置字体大小

editor.getSession().setUseWrapMode(true); ##设置代码折叠

editor.setHighlightActiveLine(false); ##设置高亮

editor.setShowPrintMargin(false); ##设置打印边距可见度

editor.setReadOnly(true); ##设置编辑器只读

• 事件

editor.getSession().on('change', function(e) {

  // e.type, etc

});  //change 事件

editor.getSession().selection.on('changeSelection', function(e) {

});  //选择事件

editor.getSession().selection.on('changeCursor', function(e) {

});  //光标移动事件

芳妮酱总结

基本满足我的需求，再下一篇里面打包速度比对，性能分析（主要与Monaca）

下一篇是monaco的使用教程以及与brace 比对