代码之家 › 专栏 › 技术社区 › Jankapunkt

Meteor包使用tmeasday从仅标记为依赖关系的npm包导入css文件:检查npm版本

meteor-packages dependencies meteor

Jankapunkt · 技术社区 · 6 年前

因为很久以前就有这个包裹了 tmeasday:check-npm-versions 这允许定义Meteor包的隐式npm包依赖关系。

如果您编写的大气包取决于在给定的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包没有“真正的依赖关系”。

我可以将导入样式的“责任”转移到将使用“我的包”的应用程序中,因为它也必须安装npm包。

将以下行放入将使用的应用程序的css中 我:我的包裹 实际工作情况:

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

但如果软件包使用它,这也会迫使应用程序安装更少或sass(在我的情况下是更少)。

有人设法以一种软件包用户友好的方式解决了这个问题?

1 回复 | 直到 6 年前

Jankapunkt 5 年前

过了一段时间,我又回到这个问题上,偶然地找到了答案。可以通过 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包更改了其结构、路径等,只需更新包即可。
动态导入返回承诺,以便您可以“等待”直到加载所有依赖项

缺点:

资源无法立即使用,加载和显示之间可能会有轻微的偏移。有时,您会看到样式在几毫秒内没有设置,在导入所有样式之前,您可能会显示加载屏幕/启动屏幕