Jusfr.W

以下是关于前端项目模块化的实践，包含以下内容：

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。