生成的AMD文件不包括匿名函数内的必需文件，并污染全局命名空间

Question

生成的AMD文件不包括匿名函数中的必需文件并污染全局命名空间

我得到了Uncaught ReferenceError: define is not defined

生成的js文件https://dadasay.com/plugin/v1/js/dadasay.min.js未包含必需的文件require.js

通过运行gulp minify_plugin_js

生成的js文件

但是，预期的导出js文件应该与此https://gist.github.com/anonymous/32894a4065ce338fb0416f4eb2b884dd

类似

我怎么能在Gulp js和require.js

中这样做

require.js config

    'use strict';

    var vendor_paths = {
        require: './vendor/require',
        jquery: './vendor/js/jquery-2.1.1.min',
        ...
    }

    require.config({
        paths: vendor_paths,
        hbs: { // optional
            helpers: true,            // default: true
            templateExtension: 'hbs', // default: 'hbs'
            partialsUrl: ''           // default: ''
        },

        shim: {
            handlebars: {
                exports: 'Handlebars'
            },
            backbone: {
                deps: [
                    'jquery',
                    'underscore'
                ],
                exports: 'Backbone'
            },
            underscore: {
                exports: '_'
            }
        },

    });

    require(["app"],function(App){

        define(["app"], function (App) {
            $("#dadasay_comments_plugin").hide();
            $('head').append('<link rel="stylesheet" href='+cfg.css_style_link+' type="text/css" />');
            return App.initialize();
        });

    });

Gulp config

    var v1_assets = {
      css: ['public/plugin/v1/css/*.css'],
      js: ['public/plugin/v1/src/**/*.js'],
      require_manifest_file: "public/plugin/v1/src/main.js"

    }
    gulp.task('minify_plugin_js',function(){
        gulp.src(v1_assets.js)
            .pipe(amdOptimize("main",{
                configFile: v1_assets.require_manifest_file,
                findNestedDependencies: true,
                include: true
            }))
            .pipe(concatFile('dadasay.min.js'))
    })

导出的js min文件

https://dadasay.com/plugin/v1/js/dadasay.min.js

define('app_config', [], function () {

    return {
        server_host: SERVER_HOST,
        hideCommentsThreshouldNumber: 3,
        comments_req_prefix: SERVER_HOST + '/api/v1/comments/load?og_url=',
        css_style_link: [
            SERVER_HOST,
            PLUGIN_LOCATION,
            'style.min.css'
        ].join('/')
    };
});
....

Answer 1

该行：

define(["app"], function (App) {

是不必要的。您已经异步地需要您的应用程序。

我相信您可以尝试直接在gulp中使用requirejs优化器，这是我的构建任务的样子：

"use strict";

const requirejs = require("requirejs");
const path = require("path");
const _ = require("underscore");

module.exports = function (options, callback) {

    // RequireJS Optimizer Build Configuration
    // See this: https://github.com/jrburke/r.js/blob/master/build/example.build.js
    // as an example file that details all of the allowed optimizer configuration options.
    var buildConfig = {
        appDir: options.dest,
        baseUrl: "./",
        optimize: "uglify2",
        optimizeCss: "standard",
        findNestedDependencies: true,
        dir: options.build,
        removeCombined: true,
        fileExclusionRegExp: options.exclude || /test/,
        modules: options.modules || [{
            name: "runner"
        }],
        allowSourceOverwrites: true
    };
    var config = path.join(__dirname + "/../../", options.config);
    var requireConfig = require(config);
    _.extend(buildConfig, requireConfig);
    requirejs.optimize(buildConfig, function (text) {
        callback(null, text);
    }, callback);

};

然后在gulp：

const gulp = require("gulp");
const build = require("../task/build.task");

gulp.task("build", function (callback) {
    build({ some: "options" }, callback);
});