原始地址: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(),
]
}
就是这样!希望这会为您节省数小时的痛苦谷歌搜索,并防止您因为长时间盯着同一个配置文件而头痛不已!