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

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

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

ljsrvy3e

ljsrvy3e1#

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

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

// tests/dummy/templates/application.hbs

{{page-title "Dummy"}}

<BrandHeader>Header text</BrandHeader>
<h2 id="title">Welcome to Ember</h2>

{{outlet}}

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

zsohkypk

zsohkypk2#

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

module.exports = {
  name: require('./package').name,

  isDevelopingAddon: () => true,
}

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

// In your ember-cli-build.js file
let app = new EmberApp(defaults, {
  autoImport: {
    watchDependencies: [
      // trigger rebuilds if "some-lib" changes during development
      'some-lib',
      // trigger rebuilds if "some-lib"'s inner dependency "other-lib" changes
      ['some-lib', 'other-lib'],
      // trigger rebuilds if any of your dependencies change during development
      ...Object.keys(require('./package').dependencies || {}),
    ],
  },
});


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

相关问题