Question

介绍：

我构建了一个管理模板（css + js），并将其上传到npm。该软件包在“ dist”文件夹中包含已编译的css / js文件，在“ build”文件夹中包含scss文件。该程序包具有几个依赖项，这些依赖项在devDependencies中列为package.json：

"devDependencies": {
  "datatables.net": "^1.10.19",
  "dropzone": "^5.5.1",
  "laravel-mix": "^4.0.13",
  ...
}

没有dependencies，我认为这是正确的，因为我直接使用已编译的css / js（js只是jQuery代码）。

有一个admin.scss文件，其中包含所有 imports ：

@import 'abstracts/variables';

@import
  '~datatables.net-bs4/css/dataTables.bootstrap4.min.css',
  '~easymde/dist/easymde.min.css',
  '~flatpickr/dist/flatpickr.min.css',
  '~jasny-bootstrap/dist/css/jasny-bootstrap.min.css',
  '~selectizebootstrap/dist/css/selectize.bootstrap4.css';

@import
  'components/alerts',
  'components/cards';

我在一个PHP项目（Laravel）中使用admin软件包。管理软件包包含在我的PHP项目的devDependencies中。 admin.css文件包含在php.scss文件中：

@import '../../node_modules/admin-template/dist/css/admin.css';

问题：

我需要更改admin.scss文件的一些变量。因此，除了包含已编译的css外，我还需要包含scss：

@import '../../node_modules/admin-template/build/scss/admin';

如果这样做，我会收到错误消息，因为我的devDependencies中未安装管理模板node_modules。

如果在管理模板文件夹中执行npm install，则会创建一个node_modules文件夹，并将所有依赖项安装在该文件夹中。
但是错误不会消失，我认为是因为在scss文件tilde的导入中使用了@import '~datatables.net-bs4/css/dataTables.bootstrap4.min.css'。它正在寻找根文件夹中的文件（不在软件包中）。

我该怎么办？

将所有管理模板devDependencies添加为我的PHP项目的devDependencies吗？似乎不正确。
将管理模板devDependencies列为dependencies，所以当我安装软件包时，是否也安装了所有依赖项？似乎也不对，是devDependencies。
要从tilde ~文件中的所有@imports中删除admin.scss吗？因此，如果需要直接包含scss，则需要在包中进行npm install。如果我已经在node_modules中安装了某些软件包，它们将是两次。
还有其他选择吗？

Answer 1

简短答案，也将它们放在admin-template/package.json的“ optionalDependencies”字段中。

这样，当您：

cd php-project
npm install admin-template 
# or simply `npm install` if it's already in "dependencies"

像admin-template这样的datatables.net-bs4的

“ optionalDependencies”将被安装到顶层node_modules文件夹中。另外，“ optionalDependencies”对我来说似乎是该死的。

现在，如果您真正关心仅在软件包中使用.css的用户的安装占用空间，那么不幸的是，没有简单的方法可以实现此目的。

您不可避免地要求.scss的用户做一些额外的工作。您可以为他们提供有关如何手动执行操作的指南，也可以提供脚本以使其自动化。

一种可能的解决方案是您还提供一个bin文件。

admin-template/bin/admin-template-enable-sass.js # or .sh if you prefer

// package.json
{
  "bin": "bin/admin-template-enable-sass.js"
}

通过这种方式，当用户npm install admin-template时，该bin文件被符号链接到顶级node_module/.bin，从而使其可以通过npx cli命令运行。

现在您的.scss高级用户只需键入：

npx admin-template-enable-sass

让您的脚本来照顾他们。

在我自己的项目中重新构建npm软件包的正确方法是什么？

1 个答案: