managing-javascript-the-easy-way-in-rails-7-517g

原始地址：https://dev.to/pezholio/managing-javascript-the-easy-way-in-rails-7-517g

Rails 7已经发布了，并且随之而来的是一种全新的方式来管理JavaScript，其中包括"使用import maps以及Hotwire提供的Turbo和Stimulus作为默认选项的UJS"。我是一个经验丰富的开发人员，但我必须承认，我对这些概念感到困惑，而且我有一个非常简短的全新项目，我希望能够尽快完成并交付出去。

我希望采取的方法与我在Rails 6和Webpacker中所使用的方法相似，但同时使用一些新的东西，并且不会在我发布之后很快变得过时。经过一些背景研究和与同事的讨论，我最终选择了JSbundling。这允许与JavaScript世界中的其他资产构建方法类似的方法，但又可以利用我们熟悉和喜爱的asset pipeline的特殊功能。

首先，在Gemfile中添加jsbundling-rails：

gem "jsbundling-rails", "~> 1.0"

然后运行bundle install。

然后运行生成器（我使用的是rollup，因为相对于Webpack来说更容易理解，并且专注于构建JS）：

bin/rails javascript:install:rollup

这将向您的Rails应用程序添加以下内容：

• 一个app/assets/builds文件夹 - 这将包含您构建的JS文件，然后通过asset pipeline进行提供。
• 添加一个app/javascript/application.js文件 - 这是您的应用程序前端JavaScript的入口点。
• 一个bin/dev文件 - 这应该是您在开发中运行应用程序的方式。它运行（并且可选安装，如果您还没有安装的话）Foreman，因此您可以即时运行服务器和构建JavaScript。
• 一个Procfile.dev文件 - 这告诉Foreman在运行bin/dev脚本时要运行哪些进程。
• 一个rollup.config.js文件 - 这告诉Rollup如何构建您的application.js中的JavaScript。

此外，它还会将一些附加部分添加到您的.gitignore文件中（以便不将构建的文件提交到git），并将builds文件夹添加到assets/manifest.js文件中。它还会将必要的依赖项添加到您的package.json中，并添加一个NPM命令来构建您的JS。

当您使用bin/dev启动服务器时，您的应用程序将像往常一样启动，同时监视您的application.js和rollup.config.js文件的任何更改并构建结果。

一些要注意的地方

这在我一开始时基本上可以工作，但我遇到了一些问题。首先，我想使用Babel确保我的JS与较旧的浏览器兼容（因为我们仍然需要支持IE11，因为我们与政府客户合作）。将以下内容添加到我的rollup.config.js似乎有效：

import resolve from "@rollup/plugin-node-resolve"
import { babel } from '@rollup/plugin-babel';

export default {
  input: "app/javascript/application.js",
  output: {
    file: "app/assets/builds/application.js",
    format: "es",
    inlineDynamicImports: true,
    sourcemap: true
  },
  plugins: [
    babel({
      babelHelpers: 'runtime',
      exclude: 'node_modules/**',
      presets: [
        [
          '@babel/preset-env', {
            'useBuiltIns': 'usage',
            'corejs': '3'
          }
        ]
      ],
      plugins: ['@babel/plugin-transform-runtime']
    }),
    resolve()
  ]
}

（我还必须安装@babel/plugin-transform-runtime和@babel/runtime才能使其正常工作）。

其次，我喜欢保持我的JS模块化，每个功能模块都有单独的文件，并使用import进行引入。为了使其正常工作，我必须将rollup的output格式设置为iife（立即调用的函数表达式），该格式将一个函数包装在所有代码周围，使其在JS加载后立即运行。现在，我的rollup配置看起来像这样：

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs';
import { babel } from '@rollup/plugin-babel';

export default {
  input: 'app/javascript/application.js',
  output: {
    file: 'app/assets/builds/application.js',
    format: 'iife',
    inlineDynamicImports: true,
    sourcemap: true,
  },
  plugins: [
    commonjs(),
    babel({
      babelHelpers: 'runtime',
      exclude: 'node_modules/**',
      presets: [
        [
          '@babel/preset-env', {
            'useBuiltIns': 'usage',
            'corejs': '3'
          }
        ]
      ],
      plugins: ['@babel/plugin-transform-runtime']
    }),
    resolve(),
  ]
}

就是这样！希望这会为您节省数小时的痛苦谷歌搜索，并防止您因为长时间盯着同一个配置文件而头痛不已！