如何使用gulp将JS依赖库打包为可直接通过script标签引入的单文件

方案1：直接使用npm包内已编译好的UMD文件（无需额外打包，操作最简单） #

你已经通过npm安装了vue3-datepicker@0.2.4，直接打开项目下的node_modules/vue3-datepicker/dist目录，就能找到可直接通过script标签引入的编译后文件：

• 开发调试用未压缩版：vue3-datepicker.js
• 生产环境用压缩版：vue3-datepicker.min.js
• 配套样式文件：vue3-datepicker.css

建议你把需要用到的js和css文件复制到.NET项目的wwwroot/lib目录下，避免直接引用node_modules内部文件，发布时也不会丢失资源

页面引入示例代码：

<!-- 必须先引入Vue3的js文件 -->
<script src="你本地存放的vue.js路径"></script>
<!-- 引入datepicker样式 -->
<link rel="stylesheet" href="/lib/vue3-datepicker/vue3-datepicker.css">
<!-- 引入datepicker组件js -->
<script src="/lib/vue3-datepicker/vue3-datepicker.min.js"></script>

<script>
const app = Vue.createApp({
  // 你的业务逻辑代码
})
// 注册全局组件，直接在模板中使用<datepicker />即可
app.component('datepicker', Vue3Datepicker)
app.mount('#app')
</script>

如果注册时提示Vue3Datepicker未定义，打开浏览器控制台输入window查看全局挂载的组件变量名，替换即可。

方案2：自定义打包（无需使用gulp，用更轻量的rollup实现） #

如果你需要自定义打包输出，不需要用gulp做复杂配置，用rollup即可快速完成，操作步骤如下：

1. 项目根目录执行命令安装所需依赖：
   npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-vue@next rollup-plugin-css-only --save-dev
2. 根目录新建rollup.config.js配置文件，内容如下：

import { nodeResolve } from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import vue from 'rollup-plugin-vue'
import css from 'rollup-plugin-css-only'

export default {
  // 输入源为npm包内的esm版本文件
  input: 'node_modules/vue3-datepicker/dist/vue3-datepicker.esm.js',
  output: {
    // 输出到你.NET项目的静态资源目录
    file: './wwwroot/lib/vue3-datepicker.js',
    format: 'umd',
    name: 'Vue3Datepicker',
    // 声明全局依赖Vue，不需要打包到产物中
    globals: {
      vue: 'Vue'
    }
  },
  external: ['vue'],
  plugins: [
    nodeResolve(),
    commonjs(),
    vue(),
    css({ output: 'vue3-datepicker.css' })
  ]
}

3. 打开package.json文件，在scripts节点下新增一行配置：
   "build:datepicker": "rollup -c"
4. 根目录执行命令npm run build:datepicker，即可自动在配置的输出目录生成打包好的js和css文件，直接按方案1的方式引入即可。

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