开发Ember插件时触发实时重装

syqv5f0l  于 2023-08-04  发布在  其他
关注(0)|答案(2)|浏览(175)

我正在为我的团队开发一个私人Ember插件,它将包含一些品牌UI组件,我们将在一系列不同的应用程序中重用这些组件,例如<BrandHeader /><BrandFooter />
是否有一个标准来创建一个开发环境,允许您在构建组件时获得组件的实时重新加载预览?如果没有一个标准,是否有人有一个工作流程,你已经创建了适合你?
我尝试使用的策略是用ember-cli ember addon <name>创建一个插件,然后npm link连接到一个Ember应用程序,在那里我调用组件,但使用这种方法,我需要重建ember应用程序,每次我对插件进行更改。

ljsrvy3e

ljsrvy3e1#

我在Ember文档中找不到明确解释这一点的地方,但我找到了答案:

**ember addon <name>命令会自动在tests/dummy目录下创建一个“虚拟”应用。**您可以在此应用中使用您的插件组件,无需特殊配置。在下面的示例中,我刚刚添加了一行代码,您可以在其中看到<BrandHeader>组件被调用。

  1. // tests/dummy/templates/application.hbs
  2. {{page-title "Dummy"}}
  3. <BrandHeader>Header text</BrandHeader>
  4. <h2 id="title">Welcome to Ember</h2>
  5. {{outlet}}

字符串
在项目的根文件夹中运行ember serve将启动一个开发服务器,就像在普通的Ember应用程序中一样,为虚拟应用程序提供服务。对组件的更改将实时更新。

zsohkypk

zsohkypk2#

有几件事你需要看看,以确保live-reload在项目之间的npm/yarn/pnpm链接之间工作:
在v1插件的<project-root>/index.js中,您需要临时设置isDevelopingAddon

  1. module.exports = {
  2. name: require('./package').name,
  3. isDevelopingAddon: () => true,
  4. }

字符串
如果安装了Watchman,则可以跳过此步骤。
接下来,在你链接的应用中,你可能需要在ember-cli-build.js中设置autoImport.watchDependencies,如下所示:

  1. // In your ember-cli-build.js file
  2. let app = new EmberApp(defaults, {
  3. autoImport: {
  4. watchDependencies: [
  5. // trigger rebuilds if "some-lib" changes during development
  6. 'some-lib',
  7. // trigger rebuilds if "some-lib"'s inner dependency "other-lib" changes
  8. ['some-lib', 'other-lib'],
  9. // trigger rebuilds if any of your dependencies change during development
  10. ...Object.keys(require('./package').dependencies || {}),
  11. ],
  12. },
  13. });


embroider下,我相信所有这些观看都会自动发生。

展开查看全部

相关问题