Wie require 'ass-builds/ace' mit Webpack und noParse option
Ich versuche momentan zu verlangen ass-builds (installiert bower) mit webpack. Da es eine große lib, ich bin das hinzufügen den gesamten Ordner zu noParse option. Ich bin mit webpack mit der option-d auf dem terminal.
Das problem ist: wenn mein code versucht, die es erfordern, ist es ein leeres Objekt. Auch, es ist nicht vom browser geladen wurden. Hier sind einige Informationen über das, 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 wurde nicht geladen auf Chrome Netzwerk"
Es zeigt auf Chrome Quellen-panel (weiß nicht, warum da kein ass.map-Datei geladen wurden entweder)
Wirklich langsam die Ideen aus, was ich falsch mache hier. Gibt es eine gute Beispiel, das ich clone and test? (Es kann sein, anderen lib auch).
- Ich habe ein workaround mit { äußerlichkeiten: { 'ace/ace': 'ace } }, aber ich muss noch ein <script> - tag mit dem Pfad (ass, Z. B. <script src="/static/bower_components/ace-builds/src-min/ace.js"></script> - keine optimale Lösung, aber zumindest funktioniert.
- Habe das gleiche Problem. Das war die Lösung?
- Ja. Ich habe nicht berühren, den code, da die. Jemand sagte Klammer, aber ich habe nicht versucht.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Verwenden
brace
. Es ist ein browserify kompatible version der ace-editor funktioniert auch mit webpack. Version 0.5.1 ist mit ace 1.1.9.https://github.com/thlorenz/brace