mm_es6_to_amd

ES6到AMD/UMD模块转换器，支持Vue.js

描述

一个强大的JavaScript模块，用于将ES6模块语法转换为AMD（异步模块定义）和UMD（通用模块定义）格式。同时支持Vue.js模板转换，并提供全面的AST（抽象语法树）操作能力。

安装

npm install mm_es6_to_amd

特性

• ES6到AMD转换：将ES6 import/export语法转换为AMD格式
• ES6到UMD转换：将ES6模块转换为通用模块定义格式
• Vue.js支持：处理Vue.js模板和组件文件
• AST操作：高级AST解析和转换能力
• 灵活配置：可自定义的转换选项
• 轻量级：无需外部依赖

使用方法

基本ES6到AMD转换

const { Es6ToAmdConvert } = require('mm_es6_to_amd');

const converter = new Es6ToAmdConvert();
const es6Code = `
import { add } from './math';
export function calculate(a, b) {
  return add(a, b);
}
`;

const amdCode = converter.toAmd(es6Code);
console.log(amdCode);

ES6到UMD转换

const { Es6ToAmdConvert } = require('mm_es6_to_amd');

const converter = new Es6ToAmdConvert();
const es6Code = `
export function area(radius) {
  return Math.PI * radius * radius;
}
`;

const umdCode = converter.toUmd(es6Code);
console.log(umdCode);

Vue.js模板支持

const { Es6ToAmdConvert } = require('mm_es6_to_amd');

const converter = new Es6ToAmdConvert();
const vueTemplate = `
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
}
</script>
`;

const convertedCode = converter.toAmdOrUmd(vueTemplate);
console.log(convertedCode);

API参考

Es6ToAmdConvert类

构造函数

new Es6ToAmdConvert(options)

• options (Object): 转换器的配置选项

方法

toAmd(code)

将ES6代码转换为AMD格式。

• code (String): ES6源代码
• 返回: (String) 转换后的AMD代码

toUmd(code)

将ES6代码转换为UMD格式。

• code (String): ES6源代码
• 返回: (String) 转换后的UMD代码

toAmdOrUmd(code)

自动检测并将ES6代码转换为适当的格式（AMD/UMD）。

• code (String): 要转换的源代码
• 返回: (String) 转换后的代码

setVueCode(script)

处理Vue.js组件脚本，添加路径前缀。

• script (String): Vue组件脚本代码
• 返回: (String) 处理后的脚本代码

CodeConvert类

用于自定义代码转换的高级AST操作类。

构造函数

new CodeConvert(code)

• code (String): 要解析的源代码

方法

has(type)

检查AST是否包含特定类型的节点。

• type (String): 要搜索的节点类型
• 返回: (Boolean) 节点类型是否存在

find(type)

在AST中查找特定类型的所有节点。

• type (String): 要搜索的节点类型
• 返回: (Array) 找到的节点数组

remove(filter)

根据过滤条件从AST中移除节点。

• filter (Object): 节点移除的过滤条件

append(node)

将节点附加到AST的末尾。

• node (Object): 要附加的节点

示例

简单ES6模块转换

输入ES6:

import { calculate } from './utils';
export function processData(data) {
  return calculate(data);
}

输出AMD:

define(['./utils'], function(utils) {
  function processData(data) {
    return utils.calculate(data);
  }
  
  return {
    processData: processData
  };
});

复杂Vue组件转换

输入Vue组件:

<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <button @click="increment">计数: {{ count }}</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { apiCall } from './api';

export default {
  name: 'Counter',
  setup() {
    const count = ref(0);
    const title = ref('计数器应用');
    
    function increment() {
      count.value++;
    }
    
    return {
      count,
      title,
      increment
    };
  }
}
</script>

输出AMD:

define(['vue', './api'], function(vue, api) {
  const { ref } = vue;
  
  return {
    name: 'Counter',
    setup() {
      const count = ref(0);
      const title = ref('计数器应用');
      
      function increment() {
        count.value++;
      }
      
      return {
        count,
        title,
        increment
      };
    }
  };
});

测试

运行测试套件：

npm test

许可证

ISC许可证

作者

邱文武

代码仓库

• GitHub: https://github.com/qiuwenwu91/mm_es6_to_amd
• Gitee: https://gitee.com/qiuwenwu91/mm_es6_to_amd

贡献

欢迎贡献代码！请随时提交Pull Request。

开发规范

本项目遵循严格的JavaScript开发规范：

命名规范

• 类名：PascalCase（如 Es6ToAmdConvert）
• 方法名：camelCase（如 toAmd）
• 参数/变量名：小写蛇形命名
• 常量：大写蛇形命名

代码质量

• 方法长度不超过40行
• 单行代码不超过100字符
• 类专注单一功能
• 一个方法只做一件事

错误处理

• 必须进行入参校验
• 使用 throw new TypeError() 抛出错误
• 使用中文错误提示

代码风格

• 使用2空格缩进
• 使用单引号
• 一个文件一个类或多个函数

模块导入导出

• 导出：module.exports = { ClassName, functionName };
• 导入：const { ClassName, functionName } = require('./module');

类和方法声明

• 类声明：function ClassName(config) { }
• 方法声明：ClassName.prototype.functionName = function() { }