如何使用Rollup将带TS、vue-property-decorator的Vue2 GIS应用打包为npm包

问题1：是否需要将所有内容转译为JS？ #

是，你需要将所有源码（包括.vue单文件组件、TypeScript代码、SCSS样式）全部转译为可直接运行的JS代码。
npm库的运行环境默认不支持直接解析TS、.vue文件或者SCSS文件，你当前配置的rollup插件已经覆盖了这些转译能力，只需要补充一个配置就能满足你要的类型安全要求：修改tsConfig配置项，增加declaration: true、declarationDir: 'dist/types'，开启类型声明文件输出，否则外部用户调用你的库时不会有TS类型提示。
如果需要支持用户可选引入样式，也可以调整SCSS插件配置，将样式单独输出为独立CSS文件，而非打到JS内部。

问题2：仅少数组件需要对外暴露，但这些组件高度依赖其子组件运行，是否需要对外暴露所有组件？ #

不需要对外暴露所有组件。
Rollup打包时会自动处理依赖关系，你对外暴露的上层组件依赖的内部子组件会被自动打包进产物，不需要用户单独引入。你只需要在入口文件main.ts的导出列表里添加你需要对外暴露的组件、getRoutes方法、工具类、公开类型即可，内部子组件不需要加入导出列表，也不需要放到rollup的单独组件打包列表里，避免用户误引入未对外稳定的内部组件。
另外你已经将公共依赖（vue、vue-router、lodash等）加入了external列表，这些依赖不会被重复打包到你的库产物里，不用担心产物体积问题。

问题3：应该导入哪种打包产物？是esm产物、cjs产物还是主入口index.js文件？ #

你不需要让用户手动选择产物，只要在库的package.json里配置好不同场景的入口即可：

• CommonJS/Node.js场景：配置main字段指向dist/cjs/index.js
• ES模块/支持Tree Shaking的场景：配置module字段指向dist/esm/index.js
• TS类型提示入口：配置types字段指向dist/types/index.d.ts
• 如果你要支持CDN直接引入的场景，可以将iife产物路径配置到unpkg/jsdelivr字段。

普通用户只要按照标准写法import { getRoutes } from '@gis_lib'导入即可，打包工具会自动根据运行环境选择匹配的产物，不需要用户手动指定产物路径。
你当前配置的单独组件umd产物是为按需引入的场景准备的，用户可以用类似import ConfigComponent from '@gis_lib/dist/components/configcomponent'的写法单独引入单个组件，不需要全量导入整个库。

内容的提问来源于stack exchange，提问作者pcezar91