如何通过ES6的import在typescript里做代码的模块

通过命名空间的依赖这种方式，去使用变量，当依赖较多的时候，变量的来源将变得难以区分。所以，我们可以尝试通过ES6的import来做typescript的模块化组织。

• 我们先在 components.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);
  }
}

• 然后再再page.ts里导入

import {Header,Content,Footer } from './components';
class Page {
  constructor() {
    new Header();
    new Content();
    new Footer();
  }
}

• 然后编译之后去运行，会报错，因为tsconfig.json的module配置的时amd，浏览器是不支持amd的语法的，所以会报错

define("components", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Header = /** @class */ (function () {
        function Header() {
            var elem = document.createElement('div');
            elem.innerText = 'this is Header';
            document.body.appendChild(elem);
        }
        return Header;
    }());
    exports.Header = Header;
    var Content = /** @class */ (function () {
        function Content() {
            var elem = document.createElement('div');
            elem.innerText = 'this is Content';
            document.body.appendChild(elem);
        }
        return Content;
    }());
    exports.Content = Content;
    var Footer = /** @class */ (function () {
        function Footer() {
            var elem = document.createElement('div');
            elem.innerText = 'this is Footer';
            document.body.appendChild(elem);
        }
        return Footer;
    }());
    exports.Footer = Footer;
});
define("page", ["require", "exports", "components"], function (require, exports, components_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Page = /** @class */ (function () {
        function Page() {
            new components_1.Header();
            new components_1.Content();
            new components_1.Footer();
        }
        return Page;
    }());
});

image.png
image.png

• 如果想让浏览器支持，那么需要借助require.js对代码进行兼容，当然需要先引入require.js代码，我是通过cnd

// page.js
define("components", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Header = /** @class */ (function () {
        function Header() {
            var elem = document.createElement('div');
            elem.innerText = 'this is Header';
            document.body.appendChild(elem);
        }
        return Header;
    }());
    exports.Header = Header;
    var Content = /** @class */ (function () {
        function Content() {
            var elem = document.createElement('div');
            elem.innerText = 'this is Content';
            document.body.appendChild(elem);
        }
        return Content;
    }());
    exports.Content = Content;
    var Footer = /** @class */ (function () {
        function Footer() {
            var elem = document.createElement('div');
            elem.innerText = 'this is Footer';
            document.body.appendChild(elem);
        }
        return Footer;
    }());
    exports.Footer = Footer;
});
define("page", ["require", "exports", "components"], function (require, exports, components_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Page = /** @class */ (function () {
        function Page() {
            new components_1.Header();
            new components_1.Content();
            new components_1.Footer();
        }
        return Page;
    }());
    exports.default = Page;
});

// page.ts
import {Header,Content,Footer } from './components';
export default class Page {
  constructor() {
    new Header();
    new Content();
    new Footer();
  }
} 



// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
  <script src="./dist/page.js"></script>
</head>
<body>
  <script>
    require(['page'],function(page){
      new page.default()
    })
  </script>
</body>
</html>

所以，我们也可以通过import这种语法来实现模块管理；但是这里有个情况，我们编译后代码，index.html里还要引入require.js这样的库，实际上在用TS做前端代码编写的时候，一般我们项目里用webpack帮我们做进一步的代码编译。也就是说使用webpack配合tpescript，也就没有必要引入require.js这样的库了