package.json中的main字段指向的是Library的入口，通常有3个选择：

1.指向源代码入口文件，如src/index.js;
2.指向打包后的开发版本，如dist/library.js;
3.指向打包后的发布版本，如dist/library.min.js。

引用Library的方式也分为两种：

1.通过script标签直接引用，适用于简单页面；
2.通过require或import方式引用，需要借助打包工具打包，适用于复杂页面。

本文探讨一下main字段如何指定，才能兼顾各种引用方式。

指向源代码入口文件

第一种方式指向源码入口，这种情况仅适用于require方式引用。由于指向的是源代码，需要库使用者借助打包工具如webpack，自行对库进行打包。此方式存在以下问题：

1.webpack配置babel-loader一般会排除node_modules，意味着不会对library进行转译，可能会导致打包后的代码中包含ES6代码，造成低版本浏览器兼容问题；
2.如果library的编译需要一些特别的loader或loader配置，使用者需要在自己的配置中加上这些配置，否则会造成编译失败；
3.使用者的打包工具需要收集library的依赖，造成打包编译速度慢，影响开发体验。

总的来说，第一种方式需要使用者自行对library进行编译打包，对使用者造成额外的负担，因此源代码入口文件不适宜作为库的入口。但是，如果library的目标运行环境只是node端，由于node端不需要对源代码进行编译打包，所以这种情况下可以使用src/index.js作为库入口。

指向打包后的开发版本

开发版本的主要作用是便于调试，文件体积并不是开发版本所关心的问题，这是因为开发版本通常是托管在localhost上，文件大小基本没影响。

开发版本主要通过以下手段来方便调试，提升开发体验：

1.预先进行依赖收集和babel转译，即使用者不再需要对library进行这两步工作了，提高编译打包的效率；
2.尽量保留源代码的格式，保证开发版本里面的源代码基本可读；
3.保留警告信息，对开发者对库的错误或不合理调用进行提示。

其中第3点是通过库代码中添加如下类似代码实现的：

1
2
3
if (process.env.NODE_ENV === 'development') {
  console.warn('Some useful warnings.')
}

生成开发版本的似乎，webpack的DefinePlugin会将process.env.NODE_ENV替换为development，所以以上代码变为：

1
2
3
if ('development' === 'development') {
  console.warn('Some useful warnings.')
}

这就表示上述条件一直成立，warning信息会显示出来。

最近和iview的开发者争论一件事，即在生成library的开发版本的时候，NODE_ENV应该设置为development还是production。他们认为应该设置为production，理由是可以减小开发版本的体积。假设DefinePlugin将process.env.NODE_ENV替换为production，之前的示例代码会变为：

1
2
3
if ('production' === 'development') {
  console.warn('Some useful warnings.')
}

这就意味着你使用库开发应用时，不会看到任何警告信息，这不利于提前发现错误。可能有的人会说，我的源代码中没有if (process.env.NODE_ENV === 'development') {}这类代码，所以设置为production也不会有任何问题呀。殊不知，虽然你的源代码中这种没有这类提示代码，但是你的devependencies里面可能会有啊，这样做就会关闭依赖中的warning信息。

可能又有疑问：“引用开发版本的包体积很大，岂不是让我的应用打包上线版本很大？”其实完全不用担心，因为应用打包为上线版本时，会经过两个额外的工作：

1.使用DefinePlugin将process.env.NODE_ENV替换为production，关闭所有警告信息；
2.使用UglifyJsPlugin对应用代码进行minify，减小应用体积。同时会删除if ('production' === 'development') {}这类永远不会执行的代码，进一步减小应用体积。

所以，在开发时应用开发版本，不必担心最后的应用体积。但是如果开发时是以script标签的方式引用库的开发版本，上线时应该替换为响应的发布版本。

指向打包后的发布版本

发布版本追求的是尽量减小体积，因为相比于JS引擎解析的时间，网络传输是最慢的，所以要通过减小库的体积，减少网络传输的时间。

减小发布版本的文件体积，主要是通过将process.env.NODE_ENV设置为production，然后再使用UglifyJsPlugin对应用代码进行minify以及删除永不执行的代码。

那么将库的发布版本作为入口文件合不合适呢？显然不合适，因为发布版本的是经过高度压缩精简的，代码完全不可读，应用开发阶段难以调试。

发布版本是适用于在应用上线时，通过script标签形式引用。

结论

通过上面的分析，可以发现将库的开发版本作为库的入口才是正确合理的做法，即设置"main": "dist/library.js"。而作为库的开发者，也要遵循约定，生成库的开发版本的时候，使用development环境变量，保留警告信息。