创建一个用户体验包

提示

在阅读本文之前,您可能想看一看最佳实践可重用的包。

这里有一些技巧来让你的包安装作为一个用户体验包。

composer.jsonfile< /a>

你的composer.json文件必须有ob娱乐下载symfony-ux关键字:

                1 2 3
                {“关键词”:【“ob娱乐下载symfony-ux”]}
               

资产的位置

你的资产必须位于以下目录之一,与package.jsonFlex可以处理文件,以便在安装/更新:

/资产(推荐)
/资源/资产
/ src /资源/资产

package.jsonfile< /a>

你的package.json文件必须包含一个ob娱乐下载配置定义了控制器后,并添加所需的包peerDependencies:

                1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
                {“名称”:“@acme /功能”,“版本”:“1.0.0”,“ob娱乐下载symfony”:{“控制器”:{“鼻涕虫”:{“主要”:" dist / controller.js”,“获取”:“渴望”,“启用”:真正的,“autoimport”:{" dist / bootstrap4-theme.css”:假," dist / bootstrap5-theme.css”:真正的}}}},“peerDependencies”:{“@hotwired /刺激”:“^ 3.0.0”,“slugify”:“^ 1.6.5”}}
               

在这种情况下,该文件位于资产目录/ dist / controller.js就会暴露无遗。

提示

你可以写原始JSdist / controller.js文件,或者您可以如编写控制器与打印稿和transpile JavaScript。

这里是一个例子:

添加以下package.json文件:

                 1 2 3 4 5 6 7 8 9 10 11 12 13 14
                 {“脚本”:{“构建”:“巴别塔src——扩展.ts - d dist "},“devDependencies”:{“@babel / cli”:“^ 7.20.7”,“@babel /核心”:“^ 7.20.12”,“@babel / plugin-proposal-class-properties”:“^ 7.18.6”,“@babel / preset-env”:“^ 7.20.2”,“@babel / preset-typescript”:“^ 7.18.6”,“@hotwired /刺激”:“^ 3.2.1”,“打字稿”:“^ 4.9.5”}}
                

运行npm安装或线安装安装新的依赖关系。
写下你的刺激与打印稿控制器src / controller.ts。
运行npm运行构建或纱线运行构建transpile打印稿控制器到JavaScript。

在一个模板使用控制器(例如一个包中定义)你可以这样使用:

                1 2 3 4 5 6 7 8 9 10
                <div{{stimulus_controller (acme /功能/蛞蝓,{模态:“自己的价值”})}}{#将呈现:数据控制器=“acme——功能——弹头”data-acme——功能——slug-modal-value =“自己的价值”#}>…< /div>
               

不要忘记添加ob娱乐下载symfony / stimulus-bundle: ^ 2.9作为一个作曲家依赖使用树枝stimulus_ *功能。

提示

控制器命名:在这个例子中,的名字PHP包acme /功能和控制器的名称package.json是鼻涕虫。所以,为刺激将完整的控制器名称acme——功能——蛞蝓,虽然stimulus_controller ()功能,您可以使用acme /功能/蛞蝓。

每个控制器都有多种选择package.json文件:

选项	描述
启用	控制器是否应该默认启用。
主要	路径控制器文件。
获取	如何包含当页面加载控制器和依赖关系。使用`急切的`(默认),使控制器和依赖关系包括在下载页面时加载的JavaScript。使用`懒惰的`使控制器和依赖关系分离到一个单独的文件,只有异步下载(当)数据控制器的HTML页面上出现。
autoimport	进口的文件列表和控制器。有用,例如,当有几个CSS样式取决于所使用的前端框架(如引导4或5,顺风CSS…)。的值必须与文件作为一个对象键,每个文件和一个布尔值设置是否应该导入文件。

这项工作,包括代码示例,许可下 Creative Commons冲锋队3.0许可证。

< /article>