Typescript 日期fns 2-can'；Don’我不能让树摇动来工作

我很难理解v.2的摇树功能是如何工作的

为了帮助我，我制作了一个非常简单的项目，使用：

• 日期fns 2.1.0

• webpack4.39.3

• typescript 3.6.2

该测试包含2个文件，一个作为“库”，另一个作为要运行的代码，其简单程度如下

import ParseDate from './parse-date'

const parse = new ParseDate();
const result = parse.getExpirationDate({ months: 3 });

console.log(result);

但问题是，尽管我只要求使用摇树用法与6个库一起工作

import { addYears, addMonths, addWeeks, addDays, addHours, addMinutes } from 'date-fns';

从他们的：

webpack正在捆绑整个date fns库，这是两个文件的结果，726Kb

> npm run build

> date_fns_test@1.0.0 build C:\Users\balexandre\date_fns_test
> tsc && webpack

Hash: 419a712549fc2309f21e
Version: webpack 4.39.3
Time: 820ms
Built at: 2019-09-09 17:27:36
    Asset     Size  Chunks             Chunk Names
bundle.js  726 KiB    main  [emitted]  main
Entrypoint main = bundle.js
chunk {main} bundle.js (main) 441 KiB [entry] [rendered]
    > ./src/index.js main
 [./src/index.js] 410 bytes {main} [depth 0] [built]
     single entry ./src/index.js  main
 [./src/parse-date.js] 1.27 KiB {main} [depth 1] [built]
     cjs require ./parse-date [./src/index.js] 6:35-58
     + 212 hidden modules

我错过了什么？…一定很简单，但我已经没有想法了：(

---

该项目可以很容易地审查（和git pull）：

要使树震动工作，您必须配置TypeScript以编译为ES模块，而不是CommonJS，并在webpack中启用生产模式：

• 在

  tsconfig.json

  set

  module:'es2015'

• 在

  webpack.config.js中

  设置

  模式：“生产”

使用此设置，您只需要1Kb的构建：

$ size-limit dist/bundle.js 

  Package size: 724 B
  With all dependencies, minified and gzipped

以下是您的回购协议的修补程序：

diff--git a/tsconfig.json b/tsconfig.json
索引42d6d90..b64255d 100644
---a/tsconfig.json
+++b/tsconfig.json
@@ -1,7 +1,7 @@
{
“编译器选项”：{
/*基本选择*/
-“目标”：“es5”/*指定ECMAScript目标版本：“ES3”（默认）、“es5”、“ES2015”、“ES2016”、“ES2017”、“ES2018”或“ESNEXT”*/
+“目标”：“es2015”/*指定ECMAScript目标版本：“ES3”（默认）、“ES5”、“es2015”、“ES2016”、“ES2017”、“ES2018”或“ESNEXT”*/
“模块”：“commonjs”、/*指定模块代码生成：“无”、“commonjs”、“amd”、“系统”、“umd”、“es2015”或“ESNext”*/
//“lib”：[]、/*指定要包含在编译中的库文件*/
“allowJs”：false，/*允许编译javascript文件*/
diff--git a/webpack.config.js b/webpack.config.js
索引8ccbc94..1419137 100644
---a/webpack.config.js
+++b/webpack.config.js
@@-3,7+3,7@@const path=require（'path'）；
常量配置={
条目：'./src/index.js'，
-模式:"发展",，
+模式:"生产",，
统计数据：“详细”，
输出：{
path:path.resolve（uu dirname，'dist'），

看起来您的补丁不会影响模块代码的生成，这与您提到的“您必须配置TypeScript以编译到ES模块而不是CommonJS”相反。这是故意的吗？

$ size-limit dist/bundle.js 

  Package size: 724 B
  With all dependencies, minified and gzipped