Wie man 'ace-builds/ace' mit Webpack und noParse Option benötigt

Question

Ich versuche gerade, ace-builds (installiert von Bower) mit Webpack zu benötigen. Da es sich um eine riesige Bibliothek handelt, füge ich den ganzen Ordner zur noParse-Option hinzu. Ich führe das Webpack mit der Option -d auf dem Terminal aus.

Das Problem ist: Wenn mein Code versucht, es zu verlangen, ist es ein leeres Objekt. Außerdem wird es nicht vom Browser geladen. Hier sind einige Informationen von dem, was ich tue:

Meine Datei:

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

Config-Datei:

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

Es ist nicht auf Chrome-Netzwerkplatte geladen wurde

Es basiert auf Chrome Quellen angezeigt (Sie wissen nicht, warum, weil keine ace.map Datei entweder geladen wurden)

wirklich laufen die Ideen von dem, was hier falsch ich tue. Gibt es ein gutes Beispiel, das ich klonen und testen kann? (Es kann auch eine andere Bibliothek sein).

Answer 1

Verwenden Sie brace. Es ist eine browserify-kompatible Version des Ace-Editors, der auch mit Webpack funktioniert. Version 0.5.1 benutzt Ass 1.1.9.

https://github.com/thlorenz/brace