Javascript 如何要求';ace构建/ace';使用Webpack和noParse选项
我目前正在尝试使用webpack要求ace构建(从bower安装)。因为它是一个巨大的库,所以我将整个文件夹添加到noParse选项中。我正在终端上运行带有-d选项的webpack 问题是:当我的代码试图要求它时,它是一个空对象。而且,它不是由浏览器加载的。以下是我正在做的一些信息: 我的档案:Javascript 如何要求';ace构建/ace';使用Webpack和noParse选项,javascript,ace-editor,webpack,Javascript,Ace Editor,Webpack,我目前正在尝试使用webpack要求ace构建(从bower安装)。因为它是一个巨大的库,所以我将整个文件夹添加到noParse选项中。我正在终端上运行带有-d选项的webpack 问题是:当我的代码试图要求它时,它是一个空对象。而且,它不是由浏览器加载的。以下是我正在做的一些信息: 我的档案: // custom_editor.js // ace-builds are aliased by ace keyword var Ace = require('ace/ace'); // This i
// 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
配置文件:
// 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的网络面板上
它显示在Chrome的源面板上(不知道为什么,因为也没有加载ace.map文件)
我真的不知道我做错了什么。有什么好的例子可以克隆和测试吗?(它也可以是另一个库)。使用
brake
。这是一个兼容浏览器的ace编辑器版本,它也可以与webpack一起使用。版本0.5.1正在使用ace 1.1.9
我已经用{externals:{'ace/ace':'ace}}做了一个变通方法,但是我需要添加一个带有ace路径的标记,例如,-不是最佳解决方案,但至少有效。有同样的问题。这就是解决办法?是的。从那以后我再也没碰过密码。有人说要用支架,但我还没试过。我有个尺寸问题。它在开发模式下为内置模式增加了15MB,在生产模式下为3MB。我相信我们可以更好地使用ace,因为externalBrace在自定义模式方面存在巨大的问题,并且已经有一段时间没有更新了。仍然适用于裸骨设置。Ace现在的版本为1.3.3,因此我认为支架不再是可行的选项…:(