前端項目模塊化的實踐3.1：編寫可靠類庫

如下是關於前端項目模塊化的實踐，包含如下內容：

1. 搭建 NPM 私有倉庫管理源碼及依賴；
2. 使用 Webpack 打包基礎設施代碼；
3. 使用 TypeScript 編寫可靠類庫

• 使用 TypeScript 的收益
• 使用 Mocha/Jest 進行單元測試 [實現中]

在開始以前，有必要先查看使用 TypeScript 的原因，見 benefit-of-using-typescript.md。

本文仍然不是 TypeScript 的參考或介紹，文檔見於 TypeScript

開始使用 TypeScript

tsconfig.json 文件是必須的，爲了能在 es5 環境下使用，配置大概以下

{
  "compilerOptions": {
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "target": "es6"
  },
  "include": [
    "src/**/*",
    "test/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

若是在開發階段但願直接運行 TypeScript 的 .ts 文件而不是先編譯成 .js 再運行——前者是推薦方式，須要安裝依賴

yarn add typescript ts-node --dev

而後使用相似命令

node some-file.ts --require ts-node/register

在 TypeScript 中使用 Webpack 打包

TypeScript 項目推薦使用 .ts 及 ES6 的 import 語法組織全部代碼，咱們面臨如下問題

Q：遺留代碼多是原生 JavaScript 編寫的，在遷移到 TypeScript 以前，如何共存
A：須要添加對 ts-loader 的依賴，並在 webpack.config.js 中添加規則

module : {
            rules: [
                {
                    test   : /\.ts$/,
                    exclude: /node_modules/,
                    loader : 'ts-loader',
                },
            ],
        },

        resolve: {
            // Add '.ts' and '.tsx' as a resolvable extension.
            extensions: ['.ts', '.tsx', '.js'],
        },

而後在業務中，咱們使用如下方式就能夠引用遺留代碼

import base64 = require('./tool/base64'); // base64.js

Q：export default 會產生額外的 default 命名空間，如何消除
A ：設置 webpack 的配置 config.output.libraryExport = 'default' ，形如

output : {
            library      : 'Enumerable',
            libraryTarget: 'umd',
            globalObject : 'this',
            libraryExport: 'default',
            path         : path.join(__dirname, 'dist'),
            filename     : 'enumerable.js',
        },

經過該配置，咱們能夠編寫類庫 打包給原生應用調用

完整的 webpack.config.js 示例見於 webpack.config.js。