在做 Antd 国际化的时候,根据文档使用:

import { LocaleProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
// ...

return <LocaleProvider locale={zh_CN}><App /></LocaleProvider>;

结果没有用?打印了下 zh_CN 发现是 undefined???

于是进入 zh_CN 对应 zh_CN.d.ts 文件查看了一番

// zh_CN.d.ts
declare const _default: {
    // ...
};
export default _default;

好像没有什么问题呀,为什么是 undefined 呢?

查看了 dist/index.js 编译后的文件,看了看转译:

import zh_CN from "antd/lib/locale-provider/zh_CN";
console.log("zh_CN", zh_CN);

// 转译成
var zh_CN_1 = require("antd/lib/locale-provider/zh_CN");
console.log(“zh_CN”, zh_CN_1.default); // 输出 undefined

发现自己 webpack 帮我带上了 .default 属性。

我试了试用 CommonJS 语法,查看转译后结果:

const zh_CN = require("antd/lib/locale-provider/zh_CN");
console.log("zh_CN", zh_CN);

// 转译成
var zh_CN = require("antd/lib/locale-provider/zh_CN");
console.log("zh_CN", zh_CN); // 输出目标对象

明明都是引用,import 调用了 require 后的 default 属性。但是目标对象上没有这个属性啊。

import * as zh_CN from "antd/lib/locale-provider/zh_CN";
console.log("zh_CN", zh_CN);

// 转译成
var zh_CN = require("antd/lib/locale-provider/zh_CN");
console.log("zh_CN", zh_CN);

上面的使用直接打印 zh_CN 正常,使用的话,直接使用 zh_CN 的话 ts-lint 直接报错,提示我需要使用 zh_CN.default,然鹅 default 上没有东西,当然也没有生效。使用 @ts-ignore 忽略错误后,正常使用。

后来发现。。。在 zh_CN.js 中是这样写的:

exports['default'] = {
    // ...
};
module.exports = exports['default'];

之前一直看的 zh_CN.d.ts 觉得没毛病,这样一来就能解释通了:

如果使用的是 import zh_CN from "antd/lib/locale-provider/zh_CN",这句话其实是 import {default as zh_CN} from "antd/lib/locale-provider/zh_CN" 的简写,但是引用的是一个 CommonJS 模块,并没有 default 这个属性,也就没有从中解构出 default 属性赋值给 zh_CN。

再然后,如果使用的是 const zh_CN = require("antd/lib/locale-provider/zh_CN");,这时候,这个包含了所有信息被暴露出来的对象,被赋值给了 zh_CN 变量。

所以也能说在理解上,import 其实是解构过程,require 其实是赋值过程。

其实也有一个折中的处理方式,也就是修改在 zh_CN.js 中暴露对象的部分:

exports['default'] = {
    // ...
};
module.exports = exports['default'];
// 改成
module.exports = exports;

这样一来,调用的时候可以使用两种方法:

import zh_CN from './zh_CN';
// 或者
const zh_CN = require('./zh_CN').default;

综上,进一步了解 import 和 require。

特此写了一篇博客:dsadasdsad

# *.d.ts 和 *.js 的关系

这也是我好奇的一个点。

上次更新: 2018/12/27下午12:53:48