A Django package to use npm.js dependencies and transpile ES2015+
项目描述
django-npm-mjs
A Django package to use npm.js dependencies and transpile ES2015+
此包由Fidus Writer用于捆绑JavaScript。我们尽量使其尽可能通用，因此如果某些内容似乎非常奇怪且仅针对Fidus Writer，那么这很可能是我们的疏忽。请与我们联系，我们将看看我们能做些什么。
此包类似于django-compressor，因为它在向用户提供服务之前处理JavaScript文件。但也有一些区别
-
它不混合不同的JavaScript模块入口文件。它只捆绑来自一个入口文件的全部内容。在ES2015+中，不需要有大量在全局命名空间中运行的JavaScript文件。
-
它允许从同一个项目中的一个Django应用导入另一个应用，就像它们在同一个文件夹中一样，类似于Django处理静态文件和模板的方式。
-
它包括处理npm.js导入。
-
JavaScript入口文件的基准名称不变，并添加了自动版本查询，以便能够清除浏览器缓存（
/js/my_file.mjs变为/js/my_file.js?v=239329884）。这样也可以从JavaScript中引用URL（例如，用于Web Workers）。 -
它允许在django项目中，在特定应用可选的情况下，实现JavaScript插件钩子。当一个django项目可以带或不带特定应用使用时，一个应用中的JavaScript需要从另一个应用中导入内容。
快速开始
-
安装 "npm_mjs"
pip install django-npm-mjs -
将 "npm_mjs" 添加到您的 INSTALLED_APPS 设置中，如下所示：
INSTALLED_APPS = [ ... 'npm_mjs', ] -
在设置中定义一个
PROJECT_PATH，作为项目的根目录（也可以接受PROJECT_DIR）：PROJECT_PATH = os.path.realpath(os.path.join(os.path.dirname(__file__), '..')) -
在设置中定义一个
SETTINGS_PATHS，包含所有设置文件的路由（settings.py + 您可能定义的任何 local_settings.py 或类似文件） - 这是为了在设置更改时再次进行转换：SETTINGS_PATHS = [os.path.dirname(__file__), ] -
将
static-transpile文件夹添加到PROJECT_PATH内部，并将其添加到STATICFILES_DIRS中，如下所示：STATICFILES_DIRS = ( os.path.join(PROJECT_PATH, 'static-transpile'), ... ) -
加载转换，并在您的模板中使用
static模板标记来引用JavaScript文件。所有ES2015+模块的入口文件都需要有 *.mjs 后缀。入口文件可以如下所示：{% load transpile %} ... <script type="text/javascript" src="{% static "js/index.mjs" %}"></script>
您可以使用 static 模板标记继续加载其他资源，如CSS文件，就像以前一样：
<link type="text/css" rel="stylesheet" href="{% static "css/fonts.css" %}" />
-
运行
./manage.py transpile。 -
运行
./manage.py runserver。您的ES2015+模块将以浏览器兼容的JS文件形式提供服务，所有静态文件都将具有版本后缀，这样您就可以将静态服务器设置为让浏览器无限期缓存静态文件，只要DEBUG设置为False。
NPM.JS依赖项
-
将 package.json 或 package.json5 文件添加到您的应用中的一个或多个应用中。所有包文件都将合并。
-
从您包文件中指定的任何npm模块导入您的JS文件。
-
运行
./manage.py transpile。 -
运行
./manage.py runserver。
在JavaScript源中引用转换版本
在您的JavaScript源中，您可以像这样引用最后一次转换运行的版本字符串：
transpile.VERSION
例如：
let downloadJS = `download.js?v=${transpile.VERSION}` // Latest version of transpiled version of download.mjs
ManifestStaticFilesStorage
如果您使用 ManifestStaticFilesStorage，请从 npm_mjs.storage 导入它，如下所示
from npm_mjs.storage import ManifestStaticFilesStorage
如果您使用该版本，您可以在JavaScript文件中使用 staticUrl() 函数引用其他静态文件，如下所示
const cssUrl = staticUrl('/css/document.css')
请注意，您需要使用从 STATIC_ROOT 开始的绝对路径来使用 staticUrl() 函数。与默认的 ManifestStaticFilesStorage 不同，我们的版本通常将文件URL以斜杠开头解释为相对于 STATIC_ROOT 的相对路径。
下载文件
下载适用于您平台的文件。如果您不确定该选择哪一个，请了解有关安装包的更多信息。