考虑为Django前端工程师创建的“我最近的Rails JS开发环境”的探讨

2 年 ago
宇, 华
1 minute

我最近在为前端工程师配置Django的JS开发环境。

简而言之

– 如果是「片手間的JS」，用django-compressor就可以了。
– 如果是「认真地写JS」，就将它作为一个单独的应用程序进行划分（例如SPA等）。
– 给迷茫的前端工程师一些爱的帮助。

※ 这是我个人的观点。

首先

如果被生气了就删除。

我本身是一位考生，闲余时间里会做Rails工程师，更闲余的时间里还会做Django工程师。这只是一个人的胡言乱语。

我认为内容本身非常认真。

Django版本「让我来告诉你我最近基于Rails进行JS开发的环境」。

对于Vanilla Django来说

默认情况下什么都没有，所以需要编写原生的JS / CSS。当进入django.contrib.admin时，可以看到很多繁琐的代码。由于它是Django的官方应用程序，所以似乎不能依赖外部库。

如果使用Rails的话，脚本标签等默认会被插入到layout/application.html.erb中，但是在Django中需要手动添加。当文件数量增多时，可能会变得繁琐。

另外，恐怕没有文件合并和压缩功能。

我试过使用Django Compressor。

安装完django-compressor后，在INSTALLED_APPS和STATICFILES_FINDERS等中添加相应内容，然后添加以下配置。

COMPRESS_PRECOMPILERS = (                                                                                                                                     
    ('text/es6+javascript', 'babel -o {outfile} {infile}'),                                                                                                   
)

以上准备工作已经完成，除了指定type属性以外，只需按照正常的JS语法书写，系统会自动进行适当转换。

在中国翻译为母语中文的话，只需要一个选项：可以选择内联写入或指定外部文件，自由决定。

根据名字，django-compressor可以实现合并和压缩（或许这是其主要功能？）。默认情况下，只有在DEBUG=False时才会进行压缩。

{% load compress %}
{% compress js %}
<script type='text/es6+javascript' src='src.js'></script>
<script type='text/es6+javascript'>
  // hogehoge
</script>
{% endcompress %}

缺少什么？

建筑过程很脆弱。

只需指定命令，因此复杂的事情很难做。除了指定命令外，还可以进行各种细节调整，但相当麻烦。

这并不意味着它是坏的，而是在使用简单咖啡或低咖啡因等时非常方便。

JS的测试应该怎么做呢？

如果想要用ES6编写测试之类的东西，django-compressor完全不会照顾到。

那么怎么办呢：在JavaScript的世界里写JavaScript

放弃在Django的静态文件机制中插入构建过程。

引入Webpack。

我会随意创建一个webpack.config.js。

然而，如果按照通常的方式去执行，跨越应用程序的引用会非常麻烦，所以最好将每个应用程序的static指定为根目录（因为手动执行很繁琐，所以我们可以解析settings.py并创建一个库来将其添加到根目录）。

如果是非公开的应用，可以将构建前的源代码放在static/src目录下，并且将输出文件从存储库中排除掉。而对于要公开的应用，由于需要使用Webpack，所以输出文件也应该包含在存储库中，以强制要使用它的用户。

var webpack = require('webpack');

module.exports = {
  entry: './app/static/src/app.js',
  output: {
    path: './app/static/'),
    filename: 'bundle.js',
  },
  resolve: {
    root: [
      './app1/static/src',
      './app2/static/src',
    ],
  },

当需要使用Karma之类的工具时，与Webpack相同，只需注意文件夹并编写配置文件。

将前端代码从其他应用程序中分离出来

即使按照这些步骤执行，由于JS代码被分散到各个应用程序中，对于前端工程师来说可能会感到困难。

在这种情况下，可以新建一个名为frontend的应用程序，并将其分离出来。然后将该应用程序视为单个项目，在frontend目录下放置package.json等文件。

通过这样做，几乎可以完全将后端和前端分离，使每个人都能变得幸福。

当然，前端项目也采用了Django的机制，所以可以轻松地在服务器端渲染 Angular 的部分模板。

需要注意的是，将构建文件的输出目录设置为静态目录。除此之外，可以非常自由地进行任何操作。

总结

我認為以開頭所提出來的觀點作結可能是不錯的。

– 如果只是「快速编程的JavaScript」，那么使用django-compressor就足够了。
– 如果是「认真编写JavaScript」，那么就切分为单个应用程序（例如SPA等）。
– 给迷茫的前端工程师以爱的帮助。

由于Django比Rails的自由度高得多，因此可能有更多不同的方法。

由于我个人和Python/Django领域的交流不太多，所以我在这里写的内容更多地融入了Rails领域（更确切地说是@izumin5210的经验）。

如果能得到很多挑剔，我会感到非常高兴。

特别感谢

    • フロントエンドエンジニアのための「俺の最近のRailsのJS開発環境」を考察する – Qiita

 

    俺の最近のRailsのJS開発環境を教えてやる – Qiita

参考资料

    Django Compressor — Django Compressor 1.5 documentation
bannerAds