如何在构建时自动更改脚本标记URL

Ta946 发表于 Dev

Ta946

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

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

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

有没有更好的（自动）方式让代码main-build.js在生产中使用代码，而main.js在本地或测试环境中使用代码的内容呢？

例如：使用节点环境变量来更改链接index.html（不确定如何更改html！）或更改其内容，main-build.js但是每次运行r.js进行生产时，该内容都会被覆盖

埃米尔·伯杰隆（Emile Bergeron）

我个人使用Gulpindex.html使用gulp-html-replace处理文件。

在开发中，您放置了所需的标签。

<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);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。