【问题标题】:How to integrate in best way yarn package with Rails 6?如何以最佳方式将纱线包与 Rails 6 集成?
【发布时间】:2021-03-07 10:19:43
【问题描述】:

我一直对如何以最简单的方式将第三方yarn包集成到Rails 6项目中遇到问题,例如@tabler/core。我知道我可以在app/javascript/packs/application.js 中执行require("@tabler/core"),但不确定它是如何工作的以及它做了什么。在tabler node_modules文件夹中还有tabler正在使用的其他第三方包,如何以最好和最简单的方式一次导入所有东西?

【问题讨论】:

    标签: ruby-on-rails ruby-on-rails-6 webpacker


    【解决方案1】:

    但不确定它的工作原理和作用

    我会添加 https://www.npmjs.com/package/webpack-bundle-analyzer 以查看 webpacker 在 packs/application.js 中添加了什么。

    webpack/development.js 的外观如下:

    process.env.NODE_ENV = process.env.NODE_ENV || 'development';
    const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
    const environment = require('./environment');
    
    environment.plugins.append('BundleAnalyzerPlugin', new BundleAnalyzerPlugin());
    

    这应该可以为您提供有关其功能的足够信息。

    我没有使用tabler,但从他们的git页面require("@tabler/core")应该带来所有的东西。

    【讨论】:

    • 谢谢,但是 require("@tabler/core") 或任何其他带有 css/sass 文件的包不包含 css/sass 文件,我需要手动添加吗?
    • 是的 css/scss 文件应该手动添加。在 webpcaker 配置中,您应该有 extract_css: true 并在顶部的 packs/application.js 中执行 @import "@tabler/core" 或 @import path_to_tabler_css 如果前一个不起作用。然后在您的视图中 stylesheet_pack_tag :application.类似的东西。
    • 非常感谢,但是“lib”中 tabler node_modules 文件夹中的第三个库呢?正如我在 tabler 的 package.json 中看到的那样,有这些依赖项,例如 apexcharts 和 bootstrap,但是 webpack-bundle-analyzer 没有显示这些依赖项,只加载 @table/core/dis/js/tabler.js 我还需要加载这些在 packs/application.js 中手动依赖依赖项?
    • 如果您需要它们并且 require 没有引入它们,那么可以,手动导入。现在您已经完成了捆绑分析器导入/需要您喜欢的内容并查看它的作用。让你的代码工作:)
    • 出于好奇,CDN 从他们的 github 页面链接,它是绑定所有内容,还是只是核心?
    猜你喜欢
    • 2010-10-24
    • 2011-09-12
    • 2010-10-08
    • 1970-01-01
    • 2010-11-26
    • 1970-01-01
    • 2020-10-01
    • 2012-10-21
    • 2012-03-15
    相关资源
    最近更新 更多