前端项目模块化的实践3.1：编写可靠类库
以下是关于前端项目模块化的实践，包含以下内容：
- 使用 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。
