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

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文件，其中包含所有导入：

@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）中使用管理包。管理包包含在我的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中。

如果在admin模板文件夹中执行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的“optionalDependencies”，与datatables.net-bs4一样，将被安装到顶级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

让你的脚本为他们照顾好事情。