使用 npm 和 Django 加载 CSS 静态文件的正确方法是什么？

Question

我想从我的 node_modules 目录中加载我的静态 css 文件（例如，Bootstrap），如下所示：

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" />

当我将.../node_modules/ 放入我的STATICFILES_DIRS 设置中时，它会起作用。但是，它还会在我的 /static/ 文件夹中添加绝对大量的文件 - 主要是 devDependencies，我不需要在前端访问这些文件。

通过 npm 包含某些静态资产但不将 node_modules 中的所有内容包含在我的 /static/ 文件夹中的最佳做法是什么？

或者，包含这么多无关文件是否可以，这是最好的解决方案？

Answer 1

自从my previous answer 以来，我改变了这样做的方式。现在，我使用django-npm，这是一个非常简单的包，允许从node_modules/ 中挑选要导入的文件。 作为比较，我可以通过以下方式获得与之前回复相同的结果：

package.json

{
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1"
  }
}

my_project/settings.py

STATICFILES_FINDERS = (
  ...
  'npm.finders.NpmFinder',  # see django-npm's installation instructions
)

NPM_STATIC_FILES_PREFIX = 'node_modules'
NPM_FILE_PATTERNS = {
    'bootstrap': [
        'dist/js/bootstrap.bundle.min.*',
    ],
    'jquery': [
        'dist/jquery.min.*',
    ],
}

连接和缩小呢？

我使用django-compressor 和django-sass-processor。

Answer 2

为了避免在静态文件夹中导入许多未使用的文件，我使用Gulp 脚本复制了我需要的项目。我在安装包后使用NPM script 调用 Gulp，所以它不会影响我的日常工作流程。

package.json:

{
  "dependencies": {
    "bootstrap": "^4.3.1",
    "gulp": "^4.0.2",
    "jquery": "^3.4.1"
  },
  "scripts": {
    "install": "gulp"
  }
}

gulpfile.js

const { series, src, dest } = require('gulp');

// Task 1: copy bootstap's assets to /_vendor/
function bootstrap() {
  const files = [
    'node_modules/bootstrap/dist/css/bootstrap.min.css',
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
  ]
  return src(files).pipe(dest('_vendor'))
}

// Task 2: copy jquery's assets to /_vendor/
function jquery() {
  const files = [
    'node_modules/jquery/dist/jquery.min.js'
  ]
  return src(files).pipe(dest('_vendor'))
}

exports.default = series(bootstrap, jquery)

my_project/settings.py:

STATICFILES_DIRS = [
    str(BASE_DIR / '_vendor'),  # populated by gulp
]

Django 模板：

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}" />

奖金?

在 Gulpfile 中，您可以连接和缩小文件。例如，这是我用于 Blueimp 文件上传库的 Gulpfile：

const uglify = require('gulp-uglify');
const concat = require('gulp-concat');

// Task 3: minify blueimp's assets and save to /_vendor/
function blueimp() {
  const files = [
    'node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js',
    'node_modules/blueimp-file-upload/js/jquery.iframe-transport.js',
    'node_modules/blueimp-file-upload/js/jquery.fileupload.js'
  ]
  return src(files).pipe(uglify())
                   .pipe(concat('jquery.fileupload.min.js'))
                   .pipe(dest('_vendor/'))
}

Answer 3

我个人认为将这些无关的开发文件放在 node_modules 中（并复制到 STATIC_ROOT 中）很好。如果您的 node_modules 文件夹很大，则您的里程可能会有所不同，但是对于我的用例来说，将大小翻倍通常不是什么大问题，而且在我安装它们时不必在 STATICFILES_DIRS 中列出每个模块很方便。

STATICFILES_DIRS = (
    ...
    os.path.join(BASE_DIR, 'node_modules'),
    ...
)

然后在你的模板中，做：

<script src='{% static 'bootstrap/dist/css/bootstrap.min.css' %}'></script>

如果文件夹在大小方面确实失控，如果您开始遇到冲突，或者如果有一个您真的不想提供服务的库，Jostcrow 的回答（或编写自定义静态文件查找器）可能是有意义的.

此外，可能值得考虑尝试将所有内容捆绑在一起。如果你所有的东西都保存在捆绑的 JS/CSS 文件中，那么整个问题都可以通过 webpack 将这些文件打包到你选择的应用程序中来解决。

Answer 4

我做的是以下，

STATICFILES_DIRS = (
    os.path.join(DJANGO_PROJECT_DIR, 'static'),
    os.path.join(ROOT_DIR, 'node_modules', 'd3', 'build'),
    os.path.join(ROOT_DIR, 'node_modules', 'c3'),
)

这只会将需要的文件放在我的静态文件夹中。