如何使用 Webpack 和 noParse 选项要求“ace-builds/ace”

Posted 2023-05-07

【中文标题】如何使用 Webpack 和 noParse 选项要求“ace-builds/ace”

【英文标题】：How to require 'ace-builds/ace' with Webpack and noParse option

【发布时间】：2015-06-23 09:19:21

【问题描述】：

我目前正在尝试使用 webpack 要求 ace-builds（从凉亭安装）。由于它是一个巨大的库，我将整个文件夹添加到 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'),
      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 的 Sources 面板上（不知道为什么，因为也没有加载 ace.map 文件）

真的想不出我在这里做错了什么。有没有我可以克隆和测试的好例子？ （也可以是另一个库）。

【问题讨论】：

我已经用 externals: 'ace/ace': 'ace 做了一个解决方法，但是我需要添加一个带有 ace 路径的 - 不是最佳解决方案，但至少有效。

有同样的问题。这就是解决方案？

是的。从那以后我再也没碰过代码。有人说要用大括号，我没试过。

【参考方案1】：

使用brace。它是 ace 编辑器的 browserify 兼容版本，也适用于 webpack。 0.5.1 版本正在使用 ace 1.1.9。

https://github.com/thlorenz/brace

【讨论】：

我对此有尺寸问题。它在开发模式下增加了 15MB，在生产模式下增加了 3MB。我相信我们可以使用 ace 作为外部做得更好

Brace 在自定义模式方面存在巨大问题，并且有一段时间没有更新。仍然适用于准系统设置。

Ace 现在是 1.3.3 版，所以我认为大括号不再是一个可行的选择...... :(