javascript - 如何使用 Webpack 和 noParse 选项要求 'ace-builds/ace'

标签 javascript ace-editor webpack

我目前正在尝试使用 webpack 要求 ace-builds(从 bower 安装)。由于它是一个巨大的库,我将整个文件夹添加到 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

Object {}

配置文件:

// 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 的网络面板上加载

Network

它显示在 Chrome 的源面板上(不知道为什么,因为也没有加载 ace.map 文件)

Sources

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

最佳答案

使用大括号。它是 ace 编辑器的 browserify 兼容版本,也适用于 webpack。版本 0.5.1 使用 ace 1.1.9。

https://github.com/thlorenz/brace

关于javascript - 如何使用 Webpack 和 noParse 选项要求 'ace-builds/ace',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29683677/

相关文章:

javascript - onbeforeunload 函数中的事件未定义问题

javascript - 如何使用 javascript 触发链接上的事件处理程序

javascript - Ace 代码编辑器动态设置语言

javascript - AMD 的 Ace 编辑器和 Dojo 1.9

javascript - 箭头键和删除在 Ace 编辑器中起作用,但输入文本不起作用

javascript - jquery.mockjax 与需要 shim 的 Webpack 一起使用

javascript - 使用 webpack 创建串联的 .d.ts

javascript - 我将如何在 HTML 中制作自定义(形状非常奇怪的进度条)?

javascript - Webpack 2 配置错误

javascript - 如何减去数组的 [0] 和 [1] 等等