Question

I have an object, Plaid, that is provided by a drop-in module from Plaid, called Plaid Link. Locally, the code works perfectly in my AngularJS front-end.

The module is loaded via my AngularJS app's index.html file, right next to all of the other script tags loaded for my application.

Index.html

<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>

Here is the code where Plaid is called: (from an AngularJS controller)

$scope.addAccount = function(bankChosen) {

    $log.debug("Plaid object: ", Plaid);
    var linkHandler = Plaid.create({ // the troublesome line 
        env: 'tartan',
        clientName: 'Example Project',
        key: 'test_key',
        product: 'connect',
        onSuccess: function(public_token) {
            Restangular.one('plaid').customPOST(
                {
                    public_token: public_token,
                    user_id: $scope.currentUser.id,
                    institution_code: bankChosen
                },
                'addAccount'
            );
        },
        onExit: function() {
            $state.go('dashboard.successState');
        },
    });

    linkHandler.open(bankChosen);

};

However, when I push to the production environment, currently hosted on Heroku, it gives the javascript error ReferenceError: Plaid is not defined when it tries to load. It is breaking error when deployed to production.

What could be causing this module to be unavailable during production?

The script that loads the CDN could be getting stripped away by a standard grunt task that does that sort of thing? Or maybe I am supposed to be loading the module from the CDN in some other way in a production-environment setting? I really don't know...

Update: I found one thing that might be stripping the loaded module

From the Grunt dom-munger docs

Use this task to read and transform your HTML documents. Typical use cases include:

Read the references from your script or link tags and pass those to concat,uglify, etc automatically.

2. Update HTML to remove script references or anything that is not intended for your production builds.

Add, update, or remove any DOM elements for any reason.

dom_munger is part of my application's build process, which happens when it is deployed (!). Grunt is the likely culprit here.

Does anybody know how to load the script tag above, with dom_munger as still part of my app's grunt build step?

Answer 1

问题在于，在构建步骤中，Grunt剥离了我的应用程序中的脚本标记。因此，我必须append使用dom_munger的更新将标记重新标记到我的身体标记 - ＆gt;选项 - ＆gt;附加选项。

...只有这样，才能在使用grunt build构建应用程序后正确链接CDN脚本。

该行在我的Gruntfile中看起来像这样。

--> The key added line is this one
{selector:'body',html:'<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>'},


dom_munger:{
    [.....]
  update: {
    options: {
      append: [
        {selector:'body',html:'<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>'},
      ]
    },
    src:'index.html',
    dest: 'dist/index.html'
  }

对我而言，这是一个神秘的错误。我希望这会在某些时候帮助其他人！

How to keep Grunt dom_munger from stripping your CDN dependencies?

1 个答案: