Come richiedere 'ace-builds/ace' con opzione Webpack e noParse

Question

Attualmente sto cercando di richiedere ace-builds (installato da bower) con webpack. Dal momento che è una grande lib, sto aggiungendo l'intera cartella all'opzione noParse. Sto eseguendo webpack con l'opzione -d sul terminale.

Il problema è: quando il mio codice tenta di richiederlo, è un oggetto vuoto. Inoltre, non è caricato dal browser. Ecco alcune informazioni su quello che sto facendo:

Il mio file:

// 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 

file di

Config:

// 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' 
    }) 
    ] 
}; 

Non è stato caricato sul pannello di rete di Chrome

Si sta mostrando sul pannello Fonti di Chrome (non so perché, perché nessun file ace.map sono stati caricati sia)

davvero a corto di idee su quello che sto facendo male qui. C'è qualche buon esempio che posso clonare e testare? (Può essere anche un'altra lib).

Answer 1

Utilizzare brace. È una versione compatibile con browserify dell'editor degli assi che funziona anche con il webpack. La versione 0.5.1 sta usando 1.1.0.

https://github.com/thlorenz/brace