Как загрузить файлы сценариев angularjs

0

У меня есть приложение angularjs, и есть куча контроллеров, сервисов и директив. Позвольте мне сказать, что это controller.js, service.js и directive.js, но, правда, есть еще много js файлов, чем три. Чтобы уменьшить HTTP-запрос, я объединять эти js файлы в один, позвольте мне сказать app.js Итак, мой index.html выглядит

<html lang="en">
<body>
    <div data-ng-view></div>
    <script src="app.js"></script>
</body>
</html>

Однако в моей среде разработки я хочу отлаживать отдельные файлы, а не комбинированные. Измененный index.html дает возможность.

<html lang="en">
<body>
    <div data-ng-view></div>
    <script src="controller.js"></script>
    <script src="service.js"></script>
    <script src="directive.js"></script>
</body>
</html>

Однако я не хочу изменять index.html. Можно ли определить что-то вроде:

require('controller.js');
require('service.js');
require('directive.js');

в моем app.js Я выполнил поиск, и результаты показывают, как использовать угловые и requirejs вместе, однако мне нужно переопределить мои контроллеры и службы с помощью метода requirejs. В моем случае это требует больших усилий. И мне не нужно выполнять динамическую загрузку, так как в производственной среде есть только один файл javascript, который нужно загрузить.

  • 1
    как вы конкатать JS файлы? вы можете создавать исходные карты, чтобы, даже если у вас есть один файл, скажем, chrome знает, к какому файлу принадлежит эта строка кода;) html5rocks.com/en/tutorials/developertools/sourcemaps
  • 0
    Похоже, что это для производственной отладки, но я хочу, чтобы при работе с моим контролем версий в моей среде IDE действие сохранения могло позволить мне увидеть изменение моего приложения. Я не хочу объединять файлы и генерировать исходную карту снова.
Теги:

2 ответа

0
Лучший ответ

Если вы хотите сохранить файлы отдельно для тестирования и отладки, но объедините их для производства, я бы рекомендовал систему сборки, такую как Grunt.js или мой личный фаворит, Gulp.js. Используя эти автоматизированные инструменты сборки, вы можете создать задачу, в которой она создаст каталог проекта, объединит, минимизирует и катит JS файлы и генерирует карты, которые позволят инструментам-разработчикам ссылаться на исходные файлы. Это может творить чудеса для вашего рабочего процесса. Для этого требуется Node.js, поэтому вам также придется установить это. Это все еще много усилий, но я думаю, что это будет лучше, чем переписывать весь ваш код.

Пример файла сборки для вашего конкретного случая может выглядеть так:

//this(my-js) will grab all js file in the js directory, combine, minify, mangle, 
//rename and create sourcemaps. it also has a dependency(js-libs) to handle 
//your libraries first.
gulp.task('my-js', ['js-libs'], function() {
return gulp.src([
        'src/js/*.js',
    ])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('build/js'));
});

//this task will run the js task and then start a task that watches the files for 
//changes and reruns the my-js task anytime something changes
gulp.task('default', ['my-js'], function () {
    gulp.watch('src/js/*.js', ['my-js']);
});

Теперь это всего лишь пример, который я придумал с головы. Непроверенные. После выхода es6 у нас будет доступ к import 'somefile'. Кроме того, имейте в виду, что когда HTTP/2 будет полностью реализована, у нас будет мультиплексирование, которое позволит использовать несколько файлов в одном соединении: https://http2.github.io/faq/#why-is-http2 -multiplexed

Поделиться
  • 0
    Кстати, связанный с этим вопрос. Я запускаю код клиента с помощью задачи grunt, есть ли способ, позволяющий мне настроить сервер для подключения кода?
  • 0
    Если я вас правильно понимаю, вы используете Grunt для запуска файла .js, который запускает сервер узлов, и вы хотели бы иметь возможность легко переключаться между различными серверами? Я бы порекомендовал использовать аргументы командной строки. Вы могли бы сделать что-то вроде grunt --target=option1 . Если я прав, вы можете сделать это с помощью grunt.option .
Показать ещё 2 комментария
1

Очень приятное решение - использовать sourcemaps. поэтому, хотя у вас есть один файл, браузер знает начальный файл! Подробнее html5rocks.

Также я настоятельно рекомендую вам использовать систему runner/build для javascript для таких видов работы, как grunt или gulp.

Объединить и создать исходные карты с помощью глотки так же просто, как:

var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  return gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('all.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

Второй вариант - это плагин -препроцесс плагина, в котором вы можете настроить разные переменные env, скажем, dev, production. И в зависимости от задачи загружаются либо конкатенированный файл, либо каждый отдельно.

Извините за предоставление решения на основе внешних плагинов, но я думаю, что они могут сэкономить много времени!

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню