Как требовать "ace-builds/ace" с опцией Webpack и noParse

В настоящее время я пытаюсь использовать ace-builds (установленный с bower) с помощью webpack. Поскольку это огромная библиотека, я добавляю всю папку в параметр noParse. Я запускаю webpack с опцией -d на терминале.

Проблема заключается в следующем: когда мой код пытается его потребовать, это пустой объект. Кроме того, он не загружен браузером. Вот некоторая информация о том, что я делаю:

Мой файл:

// custom_editor.js
// ace-builds are aliased by ace keyword
var Ace = require('ace/ace');  // This is an empty Object when I'm debugging with breakpoints

Object {}

Файл конфигурации:

// webpack.config.js
var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: {
    form: path.join(__dirname, 'static/main_files/form.js'),
    vendor: [
      'jquery',
      'react',
      'underscore',
      'query-string',
      'react-dnd',
      'react-select-box'
    ]
  },
  output: {
    path: path.join(__dirname, 'static/bundle'),
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx$/,
      loader: 'jsx-loader?insertPragma=React.DOM'
    }],
    noParse: [
      /ace-builds.*/
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    root: [
      __dirname,
      path.join(__dirname, 'static'),
      path.join(__dirname, 'node_modules')
    ],
    alias: {
      jQueryMask: 'node_modules/jquery-mask-plugin/dist/jquery.mask',
      twbsDropdown: 'node_modules/bootstrap-sass/assets/javascripts/bootstrap/dropdown',
      'twbs-datetimepicker': 'node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker',
      ace: 'bower_components/ace-builds/src',
      'select-box': 'node_modules/react-select-box/lib/select-box',
      queryString: 'node_modules/query-string/query-string',
      moment: 'node_modules/moment/moment'
    }
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    })
  ]
};

Он не был загружен на панели Chrome Network

Network

Он отображается на панели "Источники Chrome" (не знаю, почему, поскольку не загружен ни один файл ace.map)

Sources

На самом деле заканчивается представление о том, что я делаю неправильно здесь. Есть ли хороший пример того, что я могу клонировать и тестировать? (Это может быть и другая библиотека).

Ответ 1

Используйте brace. Это совместимая с браузером версия редактора туза, которая также работает с webpack. Версия 0.5.1 использует туз 1.1.9.

https://github.com/thlorenz/brace