javascript - 如何在构建时自动更改脚本标签 url

Question

我正在使用 index.html 中的以下代码运行带有 Node 的 Backbone

<script src="js/api/require.js"></script>
<script>require(['js/require-cfg'],function(){require(['main'])});</script>

main.js 看起来像这样:

require(['app'], 
  function(App){
    App.initialize();
  }
);

在生产中，我使用 r.js 编译文件进入 main-build.js 并将 index.html 文件中的链接从 main 重定向到 main-build:

<script>require(['js/require-cfg'],function(){require(['main-build'])});</script>

目前，如果我想将代码部署到生产环境，我必须在 index.html 中手动将 main 更改为 main-build，或者将链接保留为 main-build，但在运行本地或测试环境时将 main-build.js 的内容更改为与 main.js 相同，然后在部署到生产环境时切换回来。

是否有更好的(自动)方法让代码在生产中使用已编译的 main-build.js ，并在本地或测试环境中使用 main.js 的内容？

例如:使用 Node 环境变量更改 index.html 中的链接(不知道如何更改 html!)或更改 main-build.js 的内容，但每次运行 r.js 进行生产编译时，内容都会被覆盖

Answer 1

我个人使用Gulp使用 gulp-html-replace 处理 index.html 文件.

在开发过程中，您可以放置​​所需的标签。

<script src="js/api/require.js"></script>
<!-- build:js -->
<script>require(['js/require-cfg'],function(){require(['main'])});</script>
<!-- endbuild -->

要进行生产构建，请创建一个使用 gulp-html-replace 插件的 gulp 任务:

var gulp = require('gulp'),
    htmlreplace = require('gulp-html-replace');

gulp.task('build', function() {

    return gulp.src("index.html")
        .pipe(htmlreplace({
            js: {
                src: [['main-build']],
                tpl: '<script>require(["js/require-cfg"],function(){require(["%s"])});</script>'
            },
        }))
        .pipe(gulp.dest("build/index.html"));
});

<小时/>

如果您采用 Gulp 路线，您可以通过它完成所有构建过程。例如，这是一个简单的 r.js 任务:

var rjs = require('requirejs');

gulp.task('optimize', function(done) {
    rjs.optimize({
        name: "main",
        out: "build/js/main.min.js",
        /* ...other options */
    }, function(buildResponse) {
        done();
    }, done);
});