TypeScript 如何使用 import 语法
<pre><code class="language-ts">export class Header {constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Header";
document.body.appendChild(elem);
}
}
export class Content {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Content";
document.body.appendChild(elem);
}
}
export class Footer {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Footer";
document.body.appendChild(elem);
}
}
</code></pre>
<pre><code class="language-ts">import { Header, Content, Footer } from "./components";
export default class Page {
constructor() {
new Header();
new Content();
new Footer();
}
}
</code></pre>
<p>编译好的代码都是define开头的(这是 amd 规范的代码，不能直接在浏览器中运行，可以在 Node 中直接运行)，这种代码在浏览器中是没办法被直接运行的，需要其他库(require.js)的支持。</p>
<p>引入现成的 CDN 的 require.js：</p>
<pre><code class="language-html"><script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
</code></pre>
<p>在 html 里使用：</p>
<pre><code class="language-html"><body>
<script>
require(["page"], function (page) {
new page.default();
});
</script>
</body>
</code></pre>
<p>可以看出这么做非常麻烦，但是我们可以用打包工具来完成这项工作，比如 webpack 和 Parcel 。参考：用 Parcel 打包 TypeScript 代码</p>
<hr>
<p>相关文章：<br>
用 Parcel 打包 TypeScript 代码<br>
参考：<br>
技术胖——TypeScript从入门到精通（24. TypeScript 如何使用 import 语法）</p><br><br>
来源：https://www.cnblogs.com/xch-jiang/p/14261156.html
頁:
[1]