新手问题 6.1 是不是无法完全脱离 assets ?

syutran · 2021年01月20日 · 最后由 jasl 回复于 2021年01月20日 · 624 次阅读

我把应用从 5.2 升级到 6.1 ,把 js 和 scss 移到 javascript/pack 下 。原来的 assets 下保留 config/manifest.js (如果把这个删除,程序会报错。)

如果把 manifest.js 的内容删除,也会报错。

我查了一些资料,很少有讲到项目使用 webpack 以后,如何脱离 assets 目录。不该两线作战。

现在,我的项目,application.js 文件已经 3.5M 大了,首次打开页面要 1 分钟时间。

删除 assets 目录,启动 puma 报错

Expected to find a manifest file in app/assets/config/manifest.js (Sprockets::Railtie::ManifestNeededError) But did not, please create this file and use it to link any assets that need to be rendered by your app:

Example:
  //= link_tree ../images
  //= link_directory ../javascripts .js
  //= link_directory ../stylesheets .css
and restart your server

肯定是哪个配置文件在找这个 manifest.js ~ 我到网上去搜这个出错原因,都是告诉我如何再生成一个 mkdir -p app/assets/config 一大堆,其实我目的是要删除它的啊~

最终发现,把 Gemfile 中的 sprockets-rails 移除既可。

webpack-dev-server 要一直后台运行吗?

删除 assets 之后,启动 bin/webpack-dev-server 后 scss 才能加载,如果把 webpack-dev-server 用 ctrl + C 断掉,项目立即变成没有 scss 样式表的样子。搞不懂什么原因~

看我的 app/javascript/packs/application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
import * as ActiveStorage from "@rails/activestorage"
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import "channels"
import 'bootstrap/dist/js/bootstrap';
global.toastr = require("toastr")
import 'packs/orgchart';
import '../styles/application';
//document.addEventListener('turbolinks:load', ()=>{
//    $('[data-toggle="tooltip"]').tooltip();
//    $('[data-toggle="popover"]').popover()
//});

const images = require.context('../images', true)
const imagePath = (name) => images(name, true)
import '@fortawesome/fontawesome-free/js/all';

toastr.options = {
  positionClass: "toast-top-center"
};

看我的 app/javascript/styles/application.scss

@import 'bootstrap/scss/bootstrap';
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import "template";
@import "orgchart";
@import 'toastr';

#chart-container .orgchart {
  width: 100%;
  overflow: auto;
  text-align: center;
}
#chart-container-max .orgchart {
  overflow: auto;
  text-align: center;

}

可以完全删除。

“我的项目,application.js 文件已经 3.5M 大了,首次打开页面要 1 分钟时间。”

applicaiton.js 让 nginx 处理, 打开 gzip 会缓解

另外, 如果是固定的库, 没必要都放到 application.js 里, 单独也可以

rails new --skip-sprockets 创建一个新项目看看有什么差别。

可以脱离,参考我前年的帖子 https://ruby-china.org/topics/38214

需要 登录 后方可回复, 如果你还没有账号请 注册新账号