如何在不使用打包工具的情况下加载mtgsdk包？

嘿，我明白你的困境——mtgsdk是基于CommonJS模块系统的Node.js包，浏览器本身不支持require语法，而你又不想用Webpack这类全量打包工具。结合你用Gulp和NPM的情况，这里有个简单可行的方案：

核心思路 #

我们用Browserify单独把mtgsdk打包成浏览器能识别的独立文件（UMD格式，会自动挂载到全局window对象），这样就能在AngularJS代码里直接调用了，不用改动整个项目的打包流程。

步骤1：安装必要的Gulp插件 #

首先安装Browserify和能让它与Gulp配合的工具：

npm install --save-dev browserify vinyl-source-stream

步骤2：添加Gulp打包任务 #

在你的gulpfile.js里新增一个专门打包mtgsdk的任务：

const gulp = require('gulp');
const browserify = require('browserify');
const source = require('vinyl-source-stream');

// 打包mtgsdk为浏览器可用的文件
gulp.task('bundle-mtgsdk', function() {
  // 从mtgsdk的入口文件开始打包
  return browserify('./node_modules/mtgsdk/index.js')
    .bundle() // 执行打包，处理所有内部依赖
    .pipe(source('mtgsdk.bundle.js')) // 命名输出的打包文件
    .pipe(gulp.dest('./public/js')); // 替换成你项目的静态资源目录，比如dist/js
});

步骤3：执行打包任务 #

在终端运行这个Gulp任务：

gulp bundle-mtgsdk

执行完成后，你会在指定的目录下得到mtgsdk.bundle.js文件。

步骤4：在项目中引入并使用 #

1. 在你的主HTML文件里引入这个打包后的文件（放在AngularJS脚本之前）：

<script src="public/js/mtgsdk.bundle.js"></script>
<script src="your-angular-app.js"></script>

2. 现在你可以在AngularJS的控制器/服务里直接通过全局变量mtgsdk调用它的API了：

angular.module('yourMagicApp')
  .controller('CardSearchController', function($scope) {
    // 示例：搜索指定卡牌
    mtgsdk.card.find({ name: 'Black Lotus' })
      .then(function(cardData) {
        $scope.card = cardData;
        console.log('找到卡牌:', cardData);
      })
      .catch(function(error) {
        console.error('搜索出错:', error);
      });
  });

为什么这个方案可行？ #

Browserify会解析mtgsdk内部所有的require依赖，把整个包打包成一个自包含的浏览器脚本，并且自动把mtgsdk挂载到全局window对象上，这样AngularJS就能直接访问它了。而且这个方案只针对mtgsdk单独打包，不会影响你现有项目的Gulp流程。

内容的提问来源于stack exchange，提问作者Jon