在遗留 Rails 应用程序中安装 webpacker

Question

我已经添加了 webpacker gem、捆绑、安装并将我所有的 javascript_include 标签编辑到 javascript_pack。

现有 javascript 会怎样？我在 app/assets/javascripts 和 vendor/assets/javascripts 下有很多。好像没有自动捡起来。

其中一些 javascript 是 application.js.erb 所必需的，其他一些文件直接加载到应用程序的各个部分，例如：

app/assets/javascripts/application.js.erb # linked to from application layout
//= require global
//= require bootstrap
//= require moment
//= require websockets
//= require init

那我还有：

app/assets/javascripts/users.js
//= require table
//= require form
//= require sync
//= require controllers/users/index

其中一些文件是小型 Vue 应用程序，我已将它们的模板放在 Rails 视图下。现在在这个 webpacker 业务之后我有 app/assets/javascripts（它包含我所有的实际代码但被忽略），然后 app/javascript 我不知道它是什么，app/javascript 我在哪里我应该放我的 Vue 应用程序。或者反过来。或者什么的。

如何让所有这些与 webpacker 一起工作？ None 我发现的教程涵盖了将现有代码迁移到 webpacker，老实说，我对所有那些 javascript 片段的了解并不多，他们只是在那里转储但没有解释它实际上做了什么以及如何。

Answer 1

默认情况下，添加 webpack 不会改变任何内容。例如，如果您在布局中保留 javascript_include_tag 'application'，它将继续像添加 webpack 之前一样工作。

javascript/packs 文件夹中的文件是 javascript 的入口点。如果你正在做一个单页应用程序，你可能会有一个像 application.js 这样的包来启动你的整个应用程序。如果您正在做一个传统的应用程序，您可能会有一个加载所有全局脚本的主 application.js 文件，以及其他页面或组件级脚本，如 settings.js 或 calendar.js。这些脚本加载 javascript_pack_tag 'application'.

如果您将文件从 assets 文件夹移到 javascript 文件夹中，您可以将它们添加到您的包文件中，如下所示：

import 'global';
window.$ = window.jQuery = require('jquery');
import 'bootstrap';
import 'moment';
import 'websockets';

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('do init stuff here');
    // use bootstrap here
});

在遗留 Rails 应用程序中安装 webpacker

Installing webpacker in legacy Rails application

ruby-on-rails

webpack-4

webpacker