javascript – 如何使用Webpack和noParse选项“ace-builds / ace”

我目前正在尝试使用网络包进行ace构建(从bower安装).由于它是一个巨大的lib,我将整个文件夹添加到noparse选项.我在终端上使用-d选项运行webpack.

问题是：当我的代码尝试要求它时,它是一个空的对象.此外,它没有被浏览器加载.以下是我正在做的一些信息：

我的档案：

// 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'),'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文件)

在这里我真的错了,有没有一个很好的例子,我可以克隆和测试？ (它也可以是另一个lib).

解决方法

使用大括号这是一个可与webpack配合使用的ace编辑器的浏览器兼容版本.版本0.5.1正在使用ace 1.1.9.

https://github.com/thlorenz/brace

原文地址：https://www.jb51.cc/js/151551.html