Webpack / Angular CLI - как встроить сценарии в HTML вместо ссылки на них? - PullRequest
Новая
       19

Webpack / Angular CLI - как встроить сценарии в HTML вместо ссылки на них?

0 голосов
/ 04 мая 2020

Я создаю простое приложение Angular, которое должно запускаться локально через file:// URL. Файл index.html будет прикреплен и развернут через браузер без монитора, и я не могу использовать HTTP-сервер в качестве решения. Локальный запуск файла вызовет ошибки Cross Origin, как описано здесь .

Решение, которое я придумал, которое работает (!), Состоит в замене всех <script src="..."/> ресурсов (которые связаны) с ng build --prod) с <script>...</script>. На данный момент я делаю это вручную .

С выводом index.html из моего ng build: 

<script src="runtime-es2015.1eba213af0b233498d9d.js" type="module"></script><script src="runtime-es5.1eba213af0b233498d9d.js" nomodule defer></script><script src="polyfills-es5.9e286f6d9247438cbb02.js" nomodule defer></script><script src="polyfills-es2015.690002c25ea8557bb4b0.js" type="module"></script><script src="main-es2015.3bdd714db04c3d863447.js" type="module"></script><script src="main-es5.3bdd714db04c3d863447.js" nomodule defer></script>

Я изменяю это to: 

<script type="module">//content of runtime-es2015.1eba213af0b233498d9d.js//</script><script nomodule defer>//content of runtime-es5.1eba213af0b233498d9d.js//</script><script nomodule defer>//content of polyfills-es5.9e286f6d9247438cbb02.js//</script><script type="module">//content of polyfills-es2015.690002c25ea8557bb4b0.js//</script><script type="module">//content of main-es2015.3bdd714db04c3d863447.js//</script><script nomodule defer>//content of main-es5.3bdd714db04c3d863447.js//</script>

Я ищу способ автоматизировать его с помощью скрипта сборки.

Спасибо.

1 Ответ

0 голосов
/ 04 мая 2020

Это решение, которое я в конечном итоге придумал gulp:

Я набрал npm install --save-dev для пакетов gulp, gulp-inline и del.

После создания gulpfile.js в каталоге root я написал следующий код: 

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

Задача inline заменит все <script src="..."></script> соответствующим содержимым файла. clean удалит все файлы .js.

Наконец, я обновил свой package.json новым сценарием сборки: 

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-for-local": "ng build --prod --aot && gulp bundle-for-local",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Теперь npm run build-for-local будет выполнять работу.

...