如何在Tapestry 5.4.1组件中导入核心栈内的Prototype库？

看起来你在Tapestry组件的AMD模块里使用Prototype的Ajax.PeriodicalUpdater时遇到了依赖导入的问题，我来帮你一步步解决：

1. 正确使用@Import注解导入Prototype #

你之前用@Import(library = {"prototype.js"})找不到路径，是因为Tapestry无法直接识别这个相对路径——Prototype作为核心栈的一部分，存放在Tapestry核心Jar包的特定目录下。你可以用两种方式正确引用：

方式一：使用Tapestry内置符号（推荐） #

Tapestry预定义了tapestry.prototype符号，指向核心Prototype库的根目录，直接用它来引用：

import org.apache.tapestry5.annotations.Import;

@Import(library = "${tapestry.prototype}/prototype.js")
public class YourComponent {
    // 你的组件逻辑
}

方式二：使用绝对资源路径 #

Tapestry会把核心框架的静态资源映射到/tapestry路径下，所以你也可以直接写绝对路径：

@Import(library = "/tapestry/prototype/prototype.js")
public class YourComponent {
    // 你的组件逻辑
}

2. 让AMD模块正确识别Prototype依赖 #

Prototype是传统的全局脚本，不是标准的AMD模块，所以直接在define(["prototype"], ...)里依赖会报错。你有两种解决方案：

方案一：配置RequireJS Shim（规范做法） #

在你的模块配置中添加Shim，告诉RequireJS如何处理这个全局模块。可以在组件对应的JS文件开头或者全局的RequireJS配置里添加：

require.config({
    paths: {
        // 映射"prototype"模块ID到实际路径
        'prototype': '/tapestry/prototype/prototype.js'
    },
    shim: {
        // 声明Prototype暴露的全局变量，这里可以是'$'或者'Prototype'
        'prototype': {
            exports: 'Prototype'
        }
    }
});

// 现在可以正常依赖prototype了
define(["prototype"], function() {
    // 因为Prototype是全局的，回调里不需要接收参数，直接用window上的Ajax对象即可
    return function(container, link) {
        return new Ajax.PeriodicalUpdater(container, link, { 
            method : 'post', 
            frequency : 5, 
            decay : 1 
        }); 
    };
});

方案二：直接使用全局对象（简化做法） #

如果你已经通过@Import把Prototype加载到页面了，那么它的全局对象（比如Ajax、$）已经挂载在window上，不需要在AMD模块里声明依赖，直接使用即可：

define([], function() {
    return function(container, link) {
        // 直接引用全局的Ajax对象
        return new window.Ajax.PeriodicalUpdater(container, link, { 
            method : 'post', 
            frequency : 5, 
            decay : 1 
        }); 
    };
});

3. 关于注入资产的尝试 #

如果你之前尝试用@InjectAsset，需要确保路径正确，比如：

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectAsset;
import org.apache.tapestry5.Asset;

@InjectAsset("/tapestry/prototype/prototype.js")
private Asset prototypeAsset;

@Import(library = "${prototypeAsset}")
public class YourComponent {
    // ...
}

不过这种方式不如直接使用内置符号简洁，所以更推荐第一种方法。

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