ACE editor with webpack

Question

How can I use ACE editor with webpack ? ACE editor can load extensions like syntax highlights, or code snippets dynamically. But, webpack tries to load scripts statically.

Answer 1

You could use brace which is browserify compatible

npm install --save brace

Then in one of your javascript files you can include it like so

var brace = require('brace'); require('brace/mode/javascript'); require('brace/theme/monokai');

If your using webpack with es6 you can do

import brace from 'brace' import 'brace/mode/javascript' import 'brace/theme/monokai'

You can see more here - https://www.npmjs.com/package/brace

I use a react wrapper of ace which can be found here

https://github.com/securingsincity/react-ace