Resolving typescript modules in the browser yields a 404

前端未结

关注

 2  941

I am looking to put together a small example of for a web app that is created using typescript. I have an issue with importing a module.

I just want info

index.html

Add script reference to systemjs.

Use the systemjs import javascript syntax to load the index module. No extension required.

Add the script reference to import a resolver (resolve.js) which is required to load extensionless javascript files.

<!DOCTYPE html>
<html>

<head>
    <title>Hello World</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.3.1/system.min.js"
        integrity="sha256-15j2fw0zp8UuYXmubFHW7ScK/xr5NhxkxmJcp7T3Lrc=" crossorigin="anonymous"></script>
    <script src="./dist/systemjs-hooks/resolve.js"></script>
    <script>System.import("./dist/index")</script>

</head>

<body>
    <p>Check the console log...</p>
</body>

</html>

resolve.ts

Taken from the systemjs example.

(function () {
    const endsWithFileExtension = /\/?\.[a-zA-Z]{2,}$/;
    const originalResolve = System.constructor.prototype.resolve;
    System.constructor.prototype.resolve = function () {
      // apply original resolve to make sure importmaps are resolved first
      const url = originalResolve.apply(this, arguments);
      // append .js file extension if url is missing a file extension
      return endsWithFileExtension.test(url) ? url : url + ".js";
    };
  })();

tsconfig.json

Change the module to system.

{
    "compilerOptions": {
      "target": "ES2015",
      "module": "system",
      "lib": ["es2015", "dom"],
      "moduleResolution": "node",

      "allowJs": true,
      "checkJs": true,
      "sourceMap": true,
      "outDir": "./dist",
      "strict": true,
      "esModuleInterop": true,
      "experimentalDecorators": true,
      "forceConsistentCasingInFileNames": true
    }
  }

index.js output

You can see you get a completely different output with the module set to system.

System.register(["./hello"], function (exports_1, context_1) {
    "use strict";
    var hello_1, helloWorld;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [
            function (hello_1_1) {
                hello_1 = hello_1_1;
            }
        ],
        execute: function () {
            helloWorld = new hello_1.HelloWorld();
            helloWorld.sayHello();
        }
    };
});

package.json

We need to bring in some additional devDependencies to use system in the resolve.ts.

{
  "name": "foo",
  "version": "0.0.1",
  "description": "foo",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/systemjs": "^6.1.0",
    "typescript": "^3.8.3"
  }
}

0 讨论(0)