在旧版 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/javascripts，以及我应该把我的 app/javascripts Vue 应用程序。或者反过来。什么的。

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

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
});