Webpack/Angular CLI-如何在HTML中嵌入脚本而不是引用它们? [英] Webpack/Angular CLI - how to embed scripts in HTML instead of referencing them?

问题描述

我正在构建一个精简的Angular应用程序，该应用程序应通过file:// URL在本地运行. 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捆绑在一起)替换为<script>...</script>.目前，我正在手动进行操作.

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为:

<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将用相应的文件内容替换所有<script src="..."></script>. clean然后将删除所有.js文件.

The task inline will replace all <script src="..."></script> with the corresponding file content. clean would then delete all of the .js files.

最后，我已经用新的构建脚本更新了package.json:

Finally, I've updated my package.json with a new build script:

"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将完成工作.

这篇关于Webpack/Angular CLI-如何在HTML中嵌入脚本而不是引用它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！