Question

很长一段时间以来，这个包tmeasday:check-npm-versions允许为Meteor包定义一个隐式的npm包依赖。

如果您正在编写依赖的Atmosphere软件包，请使用此软件包在给定的npm包上安装在您的项目的应用程序级别安装在。

现在我正在编写一个Meteor软件包，比如me:my-package并且依赖于npm软件包，比如说some-package。这个npm包需要我手动导入这些样式。

该文件夹位于some-package/style/main.less。

我尝试在包中导入文件，但无法将其导入到我的包的less文件中：

@import "some-package/style/main";
@import "{}/some-package/style/main";
@import "node_modules/some-package/style/main";
@import "{}/node_modules/some-package/style/main";

都抛出同样的错误：

While processing files with less (for target web.browser):
packages/me:my-package/style.less:1: Unknown import: <one of the path's above>

明显的原因是：Meteor软件包通常要求我通过api.addFiles添加文件，但软件包对npm软件包没有“真正依赖”以导入此文件。

我可以将导入样式的'责任'转移到将使用'me：my-package'的应用程序，因为它也必须安装npm包。

将以下行放入将使用me:my-package的应用程序的css实际上有效：

@import "/node_modules/some-package/style/main.less";

但如果包使用它，这也会强制应用程序安装更少或sass（在我的情况下更少）。

有人设法以一种用户友好的方式解决这个问题吗？

Answer 1

一段时间后，我回到这个问题上，偶然发现了一个答案。可以使用dynamic-import软件包来实现。

您需要添加所有样式以导入到导出的函数中，该函数返回动态导入数组。

因此，我们考虑假设的软件包me:mypackage：

Package.describe({
  name: 'me:mypackage',
  // ...
});

// this example uses it only on the client 
// because the focus is importing styles
// but the pattern could work for other assets, too
Package.onUse(function(api) {
  api.versionsFrom('1.6');
  api.use('ecmascript', 'client');
  api.use('underscore', 'client');
  api.use('tmeasday:check-npm-versions', 'client')
  api.mainModule('mypackage.js', 'client');
});

请注意，我在这里使用api.mainModule，因此我们将导出某些内容。如果要将包添加到全局名称空间，则必须将函数与动态导入附加到某个位置，以使其可访问。

在主模块中，声明npm依赖项和动态样式导入：

import { checkNpmVersions } from 'meteor/tmeasday:check-npm-versions';
checkNpmVersions({
  'some-package': '4.x.x'
}, 'me:mypackage');

const somepackage = require('some-package)
// do whatever with some-package....

// export a function that let's your project
// to be able to just import the right style deps
export const importStyles = function() {
  return [
    import('some-package/style/main.css'),
    // ... and more if required
  ]
}

在您的项目中，您需要添加dynamic-imports和me:mypackage：

$ meteor add dynamic-imports me:mypackage

并将其导入您的client/main.js的顶层：

import { importStyles } from 'meteor/me:mypackage'
importStyles()

优势：

无需在您的主项目中显式导入样式
您可以继续避免在包裹中使用NPM.depends
如果从属npm软件包更改了它的结构，路径等，只需更新该软件包。
动态导入返回promise，因此您可以“等待”直到加载所有依赖项

缺点：

资产无法立即使用，加载和显示之间可能会有一些偏移。有时您会看到样式未设置好几毫秒，并且可能会显示加载屏幕/启动屏幕，直到所有样式都导入

来自npm包的Meteor包导入css文件，仅使用tmeasday标记为依赖：check-npm-versions

1 个答案: