Fatal编程技术网
  • javascript/
  • Javascript Ace文本编辑器-如果源文件缩小，则“要求”失败

Javascript Ace文本编辑器-如果源文件缩小，则“要求”失败

javascript angularjs

Javascript Ace文本编辑器-如果源文件缩小，则“要求”失败,javascript,angularjs,ace-editor,Javascript,Angularjs,Ace Editor,我正在尝试将ace文本编辑器用于angular，其中一个需要的行为需要调用ace.require 我已经包含了适当的文件，但是我发现如果我缩小我的javascript源代码，那就不起作用了。这显然是因为路径变得无效，但我不确定如何处理这种情况，除非在优化包之外手动加载提到的文件。我正在使用ASP.NET MVC Web优化框架将我的Java脚本作为紧凑和小型的捆绑包加载 我使用指令来加载它，但是我已经在没有任何指令的情况下进行了测试，无论我是否通过测试，行为都是一样的 还有其他人发现了解决这个问

我正在尝试将ace文本编辑器用于angular，其中一个需要的行为需要调用ace.require

我已经包含了适当的文件，但是我发现如果我缩小我的javascript源代码，那就不起作用了。这显然是因为路径变得无效，但我不确定如何处理这种情况，除非在优化包之外手动加载提到的文件。我正在使用ASP.NET MVC Web优化框架将我的Java脚本作为紧凑和小型的捆绑包加载

我使用指令来加载它，但是我已经在没有任何指令的情况下进行了测试，无论我是否通过测试，行为都是一样的

还有其他人发现了解决这个问题的方法吗

这是非常简单的代码

捆 Javascript 这也可以显式地键入为

ace.require('ace/ext/language_tools');
HTML INDEX.HTML 这是一个可以重现问题的HTML文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/scripts.js"></script>
    <script type="text/javascript">
        (function () {
            var ace = window.ace = window.ace || { };
            ace.initialize = function(editor) {
                ace.require("ace/ext/language_tools");

                editor.setTheme("ace/theme/chrome");
                editor.getSession().setMode("ace/mode/javascript");

                // options
                editor.setOptions({
                    showGutter: true,
                    showPrintMargin: false,
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true,
                    fontSize: '14px',
                    fontFamily: 'Consolas'
                });
            };
        })();
    </script>
    <script type="text/javascript">
        angular.module('app', ['ui.ace'])
                .controller('HomeController',['$scope', function($scope){
                    $scope.aceLoaded = function(_editor){
                        ace.initialize(_editor);
                    };

                    $scope.Model = {
                        Scripting: ""
                    }
                }]);
    </script>
</head>
<body ng-app="app" ng-controller="HomeController">
    <div ui-ace="{ onLoad: aceLoaded }"></div>
</body>
</html>
要使ace.require正常工作，您需要在gulp.taskace中添加ext-language_工具

bundle中不需要bower_components/ace builds/src noconflict/worker-javascript.js，因为它需要加载到webworker中。为此，您需要将workerPath配置为指向正确的文件夹

ace.initialize = function(editor) {
    ace.require("ace/config").set("workerPath",
        "bower_components/ace-builds/src-min-noconflict");
    ace.require("ace/ext/language_tools");
对于ace，由于其高度设置为0，最初不可见，请参见此问题：

还要注意的是，fontFamily:“ConsoleAs”可能会在缺少该字体的系统上造成问题，因此最好向monospace添加一个回退，如fontFamily:“ConsoleAs”，monospace For ace。需要工作您需要向gulp.taskace添加ext-language_工具

bundle中不需要bower_components/ace builds/src noconflict/worker-javascript.js，因为它需要加载到webworker中。为此，您需要将workerPath配置为指向正确的文件夹

ace.initialize = function(editor) {
    ace.require("ace/config").set("workerPath",
        "bower_components/ace-builds/src-min-noconflict");
    ace.require("ace/ext/language_tools");
对于ace，由于其高度设置为0，最初不可见，请参见此问题：

另外请注意，fontFamily:“ConsoleAs”可能会在缺少该字体的系统上造成问题，因此最好向monospace添加一个回退，例如fontFamily:“ConsoleAs”，monospace

如果上述解决方案不适用于您，则请参阅我在github lahdo上的回答，因为您的工作人员仍然没有正确加载：

如果上述解决方案对您不起作用，请参考我在github lahdo上的回答，因为您的工人仍然没有正确加载：

你能摆好小提琴吗？我马上给你拿点东西来。我想我找到了一个方法给你一个样品。我已经提供了简单地重新创建整个东西的说明。那有用吗？你能摆好小提琴吗？我马上给你拿点东西来。我想我找到了一个方法给你一个样品。我已经提供了简单地重新创建整个东西的说明。那有用吗？我有另一个问题。。require不起作用，所以我这样做了：ace.config.setworkerPath，worker；工人是我的工人的道路。。如果你缩小了你的项目；别忘了在那个路径上提供它们，我有一个不同的问题。。require不起作用，所以我这样做了：ace.config.setworkerPath，worker；工人是我的工人的道路。。如果你缩小了你的项目；别忘了在该路径中提供它们。一个指向潜在解决方案的链接总是受欢迎的，但是请让您的其他用户知道它是什么，以及它为什么存在。始终引用重要链接中最相关的部分，以防无法访问目标站点或永久脱机。考虑到仅仅是一个指向外部站点的链接是一个可能的原因。一个指向潜在解决方案的链接总是受欢迎的，但是请让您的其他用户知道它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防无法访问目标站点或永久脱机。考虑到仅仅是一个指向外部站点的链接是一个可能的原因。 
var
  gulp = require('gulp'),
  concat = require('gulp-concat'),
  rename = require('gulp-rename'),
  uglify = require('gulp-uglify'),
  sequence = require('run-sequence');

gulp.task('default', function() {
  return sequence([
    "ace"
  ]);
});

gulp.task('ace', function() {
  return gulp.src([
    'bower_components/angular/angular.js',
    'bower_components/angular-ui-ace/ui-ace.js',

    'bower_components/ace-builds/src-noconflict/ace.js',
    'bower_components/ace-builds/src-noconflict/mode-javascript.js',
    'bower_components/ace-builds/src-noconflict/worker-javascript.js',
    'bower_components/ace-builds/src-noconflict/theme-chrome.js',
    'bower_components/ace-builds/src-noconflict/snippets/text.js',
    'bower_components/ace-builds/src-noconflict/snippets/javascript.js'])
    .pipe(concat('scripts.js'))
    .pipe(uglify())
    .pipe(gulp.dest('js'));
});

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/scripts.js"></script>
    <script type="text/javascript">
        (function () {
            var ace = window.ace = window.ace || { };
            ace.initialize = function(editor) {
                ace.require("ace/ext/language_tools");

                editor.setTheme("ace/theme/chrome");
                editor.getSession().setMode("ace/mode/javascript");

                // options
                editor.setOptions({
                    showGutter: true,
                    showPrintMargin: false,
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true,
                    fontSize: '14px',
                    fontFamily: 'Consolas'
                });
            };
        })();
    </script>
    <script type="text/javascript">
        angular.module('app', ['ui.ace'])
                .controller('HomeController',['$scope', function($scope){
                    $scope.aceLoaded = function(_editor){
                        ace.initialize(_editor);
                    };

                    $scope.Model = {
                        Scripting: ""
                    }
                }]);
    </script>
</head>
<body ng-app="app" ng-controller="HomeController">
    <div ui-ace="{ onLoad: aceLoaded }"></div>
</body>
</html>

'bower_components/ace-builds/src-noconflict/ace.js',
'bower_components/ace-builds/src-noconflict/ext-language_tools.js',
'bower_components/ace-builds/src-noconflict/mode-javascript.js',

ace.initialize = function(editor) {
    ace.require("ace/config").set("workerPath",
        "bower_components/ace-builds/src-min-noconflict");
    ace.require("ace/ext/language_tools");