Webpack/Angular CLI - 如何在 HTML 中嵌入脚本而不是引用它们? [英] Webpack/Angular CLI - how to embed scripts in HTML instead of referencing them?
问题描述
我正在构建一个应该通过 file:// URL 在本地运行的精益 Angular 应用程序.index.html 文件将通过无头浏览器附加和部署，我无法使用 HTTP 服务器作为解决方案.在本地运行文件会出现跨源错误，如 此处.
I'm building a lean Angular app that should be ran locally through file:// URL.
The index.html file will be attached and deployed through a headless browser and I cannot use a HTTP server as a solution. Running the file locally would bring up Cross Origin errors as described here.
我想出的解决方案(！)是替换所有 <script src="..."/> 资源(与 ng build 捆绑在一起)--prod) 和 .目前，我正在手动进行此操作.
The solution I came up with, which works (!) is to replace all <script src="..."/> resources (which are bundled with ng build --prod) with <script>...</script>. At the moment, I'm doing it manually.
来自我的 ng build 的输出 index.html 是:
With the output index.html from my ng build being:
<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>
我将其更改为:
<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>
我正在寻找一种通过构建脚本实现自动化的方法.
I'm looking for a way to automate it through the build script.
谢谢.
推荐答案
这是我最终用 gulp 提出的解决方案:
This is the solution I eventually came up with with gulp:
我已经运行 npm install --save-dev 到包 gulp、gulp-inline 和 del>.
I've ran npm install --save-dev to packages gulp, gulp-inline and del.
在根目录下创建一个gulpfile.js后，我写了如下代码:
After creating a gulpfile.js to the root directory, I've wrote the following code:
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 会将所有
