如何与一个普通的HTML网站共享一个反应项目的打字稿功能？

Question

I want to share a complex typescript exported function to a simple HTML - javascript website

I tried to use npm tsc to transform the file into javascript, but generated files have "exports" functions that creates errors in the browser console.

myFunction.ts

export const getTest = (test: any) => {
    // Change test object
    return test;
};

generated myFunction.js

Object.defineProperty(exports, "__esModule", { value: true });
exports.getTest = function (test) {
    // Change test object
    return test;
};

Browser console actually warning me "Uncaught ReferenceError: exports is not defined" when I try to include the file with a script tag in HTML file.

What am I doing wrong?

Answer 1

In order to use the original myFunction.ts file all you need to do is this:

Remove the typing and change the extension to .js :

export const getTest = (test) => {
    // Change test object
    return test;
};

And then, in your HTML file's <script> tag for that JavaScript file, make sure you set the type attibute to module like so:

<script type="module" src="myFunction.js"></script>

Finally, you'll need to import that functionality where you intend to use it.

That should do it as long as you consider browser compatibility:

ES6 Modules

To make this ultimately clear, here is a Plunkr to demonstrate what I mean.

Answer 2

The export keyword creates a module, which can only be used with a module system (such as webpack).

Either use a module system or drop export to create a normal file that creates global names.