GSAP only works when compiled inside the webpack bundle, not as External?-CodePudding

H there, I have a small typescript project i'm running in vscode. If I bundle my project as ES6 Modules or CommonJS modules (via tsconfig), granted I have to change some of the import statements to accommodate the module type, I get no errors.

import { gsap } from "gsap/dist/gsap";  //I do this for CommonJS Modules 
import { gsap } from "gsap"; //I do this for ES6 Module

As a matter of fact, as long as I webpack bundle GSAP with my app, I get no errors. The issue arises when I remove GSAP from my bundle and treat as an external:

externals: {
   "gsap/dist/gsap": 'gsap' //This is for CommonJS
   gsap: 'gsap' //This is for CommonJS //This is for ES6 Imports
}

I'm referencing the script tag at the bottom of my body tag:

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script type="text/javascript" src="js/app.bundle.js"></script>

This is a copy of my tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "allowJs": true,
    "sourceMap": false,
    "outDir": "dev/js/"
  },
  "files": ["src/ts/app.ts",
            "node_modules/gsap/types/index.d.ts"
          ]
}

This is a copy of my webpack.config.json:

const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/ts/app.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.bundle.js'
    },
    plugins: [
    ],
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/i,
          loader: "ts-loader",
          exclude: ["/node_modules/"],
        },
      ],
    },
    resolve: {
      extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
    },
    externals: {
      jquery: 'jQuery',
    },
};

In the browser, GSAP is undefined? JQuery on the other hand works fine. Please advise,

CodePudding user response：

I wrote a complete answer here that covers the GSAP ES6 module and commonJS/UMD module along with tsconfig / webpack loader setup;

https://greensock.com/forums/topic/33401-can-gsap-be-an-external-in-an-typescript-compiled-project/