什么是@nuxt/babel-preset-app
@nuxt/babel-preset-app是一个Nuxt.js的Babel预设(preset)，它包含了一系列的插件和配置，用于将Nuxt.js应用程序的代码转换成ES5以便在各种浏览器中执行。
使用环境
- Nuxt.js ^2.4.x
- Node.js ^10.13.0 || ^12.0.0 || >=14.0.0
安装
npm install --save-dev @nuxt/babel-preset-app
或
yarn add --dev @nuxt/babel-preset-app
配置
我们需要在Nuxt.js应用程序的nuxt.config.js文件里配置@nuxt/babel-preset-app。
-- -------------------- ---- -------
------ ------- -
-- ---
------ -
------ -
--------- -------- -- -
------ -
-------------------------- -
------------ -------- - -------- - ---------
------- - -------- - -
--
-
-
-
-
-在上面的配置中，我们将@nuxt/babel-preset-app传给了presets。它还定义了buildTarget 和corejs选项。
buildTarget选项有两个值：server 和client。它们用于编译服务器端代码和客户端代码。默认值是client。
corejs选项指示要使用的core-js版本。目前，最新的版本是版本3。
示例代码
获取其余装置所需的 npm 包。
npm install --save-dev @nuxt/content @nuxtjs/feed
增加一个文件来定义您的网站。此文件还将定义用于生成 RSS 订阅的变量。
-- -------------------- ---- -------
-- ----------------
------ ----- ----------- - -
------ --- ------
------------ ----- -- -- -------- -------
----- ----------------------
------- -
----- ----- ------
------ -----------------------
-
-
------ ------- -------- ------- -
------ -
-
----- ------------
------------ -
-------------------- - ------------------------------
--------------------- - ---------------------------------
------------ - -----------
-------------------- -- -
----- --- - ----------------------------------
--------------
------ -----------
--- ----
----- ----
------------ -----------------
-------- ----------
----- --- ---------------
--
--
--
---------- ---- - -- - ---
----- ------
-
-
-更新 nuxt.config.js 文件以包括 @nuxtjs/feed：
-- -------------------- ---- -------
-- --------------
------ ------- -
-- ---
------------- -
--------------
--
-------- -
---------------
--
-------- ------------------------------
----------------- ------------------
----- ---
----------- -----
--------- -
-------- -
-----------
-
-
-编写一个插件来将动态路由注入 feed：
// plugins/feed.server.js
import { getPosts } from './content.js'
import generateFeed from '~/content/_feed.js'
export default function (ctx) {
const posts = getPosts()
ctx.nuxt.options.feed.push(generateFeed(posts))
}在 nuxt.config.js 文件中链接插件：
-- -------------------- ---- -------
-- --------------
------ ------- -
-- ---
------------- -
--------------
--
-------- -
---------------
--
-------- -
----------------------------
--------------------------
--
----------------- ------------------
----- ---
----------- -----
--------- -
-------- -
-----------
-
-
-访问路由时并不会出现 404 页面，但这是由于我们仍未在路由所返回的 HTML 文件中包括文件。因此，我们现在需要修改我们的博客文章。
-- -------------------- ---- ------- ---- ------------------ --- - ----- ---- ---- -- ---- ----- ----- ------- - ------------ ---- -- ---- ----- ---- ---- ---- ---- -- -- ---- --- ----- - ---------- ---------------- --- ---- ------- ---- ----- ---- -----
最后，重新生成您的博客并检查您的 feed：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0a5e39403f2923b035c081