无需打包器：如何用Gulp编译Vue组件并通过SystemJS加载？

完全get你的思路——绕开Webpack这类主流打包工具，靠SystemJS结合HTTP2的多路复用特性做按需懒加载，既利用了现代HTTP协议的优势，又能让代码保持模块化、易维护，这个实验方向真的很有意思！下面就给你一步步讲怎么实现：

1. 先搞定依赖安装 #

首先你需要安装Gulp和Vue编译相关的工具，根据你用的Vue版本选对应的包：

如果你用Vue 3 #

npm install gulp @vue/compiler-sfc gulp-rename gulp-terser --save-dev

• @vue/compiler-sfc：Vue官方的单文件组件编译工具
• gulp-rename：用来修改编译后的文件名（比如把HelloWorld.vue改成vueHelloWorld.js）
• gulp-terser：可选，用来压缩编译后的JS文件

如果你用Vue 2 #

npm install gulp vue-template-compiler vue-template-es2015-compiler gulp-rename gulp-terser --save-dev

• vue-template-compiler：Vue2专属的模板编译工具
• vue-template-es2015-compiler：用来把编译后的模板代码转成ES5兼容格式

2. 编写Gulp编译任务 #

接下来在你的gulpfile.js里写编译Vue组件的任务，直接生成SystemJS能识别的AMD模块（你也可以改成CommonJS，不过AMD更适配SystemJS的异步加载特性）。

Vue 3版本的Gulp任务 #

const gulp = require('gulp');
const { parse, compileScript, compileTemplate } = require('@vue/compiler-sfc');
const rename = require('gulp-rename');
const terser = require('gulp-terser');

// 编译Vue组件为AMD模块
gulp.task('compile-vue', () => {
  return gulp.src('./src/components/**/*.vue') // 你的Vue组件源文件路径
    .pipe(gulp.dest((file) => {
      // 读取并解析单文件组件内容
      const fileContent = file.contents.toString();
      const { descriptor } = parse(fileContent);

      // 编译脚本部分，指定输出为AMD格式
      const scriptCompileResult = compileScript(descriptor, {
        moduleFormat: 'amd',
        outputSourceMap: false
      });

      // 编译模板为render函数
      const templateCompileResult = compileTemplate({
        source: descriptor.template.content,
        filename: file.path,
        compilerOptions: { mode: 'module' }
      });

      // 组合脚本和render函数，包裹成AMD模块
      const finalCode = `define(['vue'], function(Vue) {
        ${scriptCompileResult.code.replace('export default', 'const component =')}
        component.render = ${templateCompileResult.code};
        return component;
      })`;

      // 更新文件内容和扩展名
      file.contents = Buffer.from(finalCode);
      file.extname = '.js';
      return file.base;
    }))
    .pipe(terser()) // 可选：压缩代码
    .pipe(rename((path) => {
      // 重命名成你想要的格式，比如HelloWorld.vue → vueHelloWorld.js
      path.basename = `vue${path.basename.charAt(0).toUpperCase() + path.basename.slice(1)}`;
    }))
    .pipe(gulp.dest('./scripts/components')); // 编译后文件输出路径
});

// 监听组件变化自动编译
gulp.task('watch-vue', () => {
  gulp.watch('./src/components/**/*.vue', gulp.series('compile-vue'));
});

Vue 2版本的Gulp任务 #

const gulp = require('gulp');
const vueCompiler = require('vue-template-compiler');
const rename = require('gulp-rename');
const terser = require('gulp-terser');

gulp.task('compile-vue-v2', () => {
  return gulp.src('./src/components/**/*.vue')
    .pipe(gulp.dest((file) => {
      const fileContent = file.contents.toString();
      const { script, template } = vueCompiler.parseComponent(fileContent);

      // 编译模板为render函数
      const compiledTemplate = vueCompiler.compile(template.content);
      const renderCode = `var render = ${compiledTemplate.render};`;

      // 把组件脚本转成AMD模块格式
      let scriptCode = script.content;
      scriptCode = scriptCode.replace('export default', 'const component =');
      const finalCode = `define(['vue'], function(Vue) {
        ${scriptCode}
        ${renderCode}
        component.render = render;
        return component;
      })`;

      file.contents = Buffer.from(finalCode);
      file.extname = '.js';
      return file.base;
    }))
    .pipe(terser())
    .pipe(rename((path) => {
      path.basename = `vue${path.basename.charAt(0).toUpperCase() + path.basename.slice(1)}`;
    }))
    .pipe(gulp.dest('./scripts/components'));
});

3. 配置SystemJS与验证 #

编译完成后，你的vueHelloWorld.js和vueMenu.js就会生成在指定目录里，完全符合你之前的SystemJS配置：

SystemJS.config({
  baseURL: './',
  map: {
    'app': 'scripts/app.min.js',
    'axios': 'scripts/vendor/axios/axios.min.js',
    'modernizr': 'scripts/vendor/modernizr/modernizr.min.js',
    'vue': 'scripts/vendor/vue/vue.min.js',
    'vueHelloWorld': 'scripts/components/hello/vueHelloWorld.js',
    'vueMenu': 'scripts/components/menu/vueMenu.js'
  },
  depcache: {
    'vueHelloWorld': ['vue'],
    'vueMenu': ['vue', 'vueHelloWorld']
  }
});
require(['modernizr', 'axios', 'app']);

在app.min.js里，你就可以用SystemJS的import来懒加载组件了：

// 比如在某个用户交互事件后加载组件
document.getElementById('load-hello').addEventListener('click', () => {
  System.import('vueHelloWorld').then((HelloWorld) => {
    new Vue({
      el: '#hello-container',
      render: h => h(HelloWorld.default)
    });
  });
});

几个注意事项 #

• 如果你的组件依赖其他模块（比如axios），直接在Vue组件的<script>里用import axios from 'axios'就行，编译后的AMD模块会自动保留这个依赖，SystemJS会帮你按需加载。
• 如果你更偏好CommonJS格式，只需要把编译任务里的moduleFormat改成cjs，SystemJS也能完美识别。
• 记得运行gulp compile-vue（或对应Vue2的任务）来手动编译组件，或者用gulp watch-vue监听文件变化自动编译。

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