资源管理器

未匹配的标注

AdonisJS 使用 Webpack Encore 来编译和提供前端资源。 Webpack Encore 是 Webpack 的包装器,可以更轻松地使用 Webpack 配置。

注意:
AdonisJS 是一个后端框架,不直接与前端构建工具相关联。

你可以不使用 Webpack Encore 并自己设置前端构建工具,这无关紧要。

快速开始

创建新的 AdonisJS 应用程序会提示配置 Webpack Encore。但是,之后的设置也相对简单。只需运行以下 Ace 命令:

node ace configure encore

执行以下操作来设置 Webpack Encore:

  • 安装 ‌@symfony/webpack-encore npm 包。
  • 创建一个默认的 webpack.config.js 文件。
  • 创建 resources/js/app.jsresources/css/app.css 文件作为前端程序的入口。

编译前端资源

配置 Encore 后,AdonisJS 的预设的命令将检测它并作为以下命令的一部分处理你的前端资源。


node ace serve --watch

node ace serve --watch 命令也会在同一个进程中运行 Webpack dev server 来编译和提供前端资源。

以 “encore” 为前缀的日志来自 webpack-dev-server


node ace build --production

同样,node ace build --production 命令也将运行 encore production 命令将前端资源与你的 AdonisJS 构建捆绑在一起。


自定义输出目录

默认情况下,编译后的资源被写入 ./public/assets 目录,以便 AdonisJS 静态文件服务器找到。

但是,你可以通过更新 webpack.config.js 文件来自定义输出目录。

setOutputPath 方法接受相对于项目根目录的路径。此外,请确保使用 setPublicPath 方法更新公共 URL 前缀。

// 将文件写入该目录
Encore.setOutputPath('./public/assets')

// 在输出 URL 前加上以下前缀
Encore.setPublicPath('/assets')

阻止资源编译

你可以通过在 servebuild 命令中定义 --no-assets 标志来禁用 Webpack 资源编译。

node ace serve --watch --no-assets
node ace build --productions --no-assets

自定义开发服务器端口和主机

Webpack 开发服务器默认运行在 localhost:8080 上。如果该端口正在使用中,AdonisJS 会随机找到一个端口来启动 Webpack 开发服务器。但是,你也可以使用 --encore-args 标记定义自定义端口。

node ace serve --watch --encore-args="--port 5000"

到目前为止,你无法在 webpack.config.js 文件中定义 Webpack 开发服务器的端口。这是来自 Symfony Encore 包 的限制。

资源视图助手

根据你的 Webpack 配置,输出文件可能与输入文件不同。例如,Encore.enableVersioning() 方法将文件哈希附加到输出文件名。

因此,建议不要对模板中的文件名进行硬编码,并始终使用 asset 助手。

注意:不要按文件名进行引用

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="/assets/app.js"></script>
  <link rel="stylesheet" type="text/css" href="/assets/app.css">  
</head>
<body>
</body>
</html>

注意:使用 asset 助手

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="{{ asset('assets/app.js') }}"></script>
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/app.css') }}">  
</head>
<body>
</body>
</html>

asset 助手依赖 Encore 生成的 manifest.json 文件来解析实际 URL。你可以将它用于所有资源,包括 JavaScript、CSS、字体、图像等。

维护文件

Encore 在 public/assets 目录中生成 manifest.json 文件。此文件包含文件标识符及其 URL 的键值对。

{
  "assets/app.css": "http://localhost:8080/assets/app.css",
  "assets/app.js": "http://localhost:8080/assets/app.js"
}

asset 视图助手从这个文件本身解析 URL。

文件入口

每个 Webpack 包总是有一个或多个 入口。入口文件中的任何其他导入都是打包的一部分。

例如,如果你已将 ./resources/js/app.js 文件具有以下内容的入口,则所有内部导入将捆绑在一起以形成单个输出。

import '../css/app.css'
import 'normalize.css'
import 'alpinejs'

你可以使用 Encore.addEntry 方法在 webpack.config.js 文件中定义这些入口。第一个参数是入口名称,第二个参数是入口文件的路径。

Encore.addEntry('app', './resources/js/app.js')

多入口

除非你在单个代码库中构建多个接口,否则大多数应用程序都需要一个入口。例如:创建公共网站 + 管理面板可能需要不同的入口,因为它们通常具有不同的前端依赖项和样式。

你可以通过多次调用 Encore.addEntry 方法来定义多个入口。

引用模板文件中的入口

你可以使用 @entryPointStyles@entryPointScripts 标签来呈现给定入口的脚本和样式标签。

标签将输出具有正确 hrefsrc 属性的 HTML。 ./public/assets/entrypoints.json 文件用于查找给定入口的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
  @entryPointScripts('app')
  @entryPointStyles('app')
</head>
<body>
</body>
</html>

设置 PostCSS

第一步是从 npm 安装 postcss-loader,如下所示:

npm i -D postcss-loader

接下来,创建 postcss.config.js 文件来配置 PostCSS。

// 文件名: postcss.config.js
module.exports = {
  plugins: {}
}

最后,在 webpack.config.js 文件中启用 PostCSS 加载器。

Encore.enablePostCssLoader()

// 传递选项
Encore.enablePostCssLoader((options) => {
  options.postcssOptions = {
    config: path.resolve(__dirname, 'custom.config.js')
  }
})

设置 SASS、Less 和 Stylus

要配置 CSS 预处理器,你必须取消注释 webpack.config.js 中的以下代码:

// 允许SASS
Encore.enableSassLoader()

// 允许 Less
Encore.enableLessLoader()

// 允许 Stylus
Encore.enableStylusLoader()

请确保为它们安装适当的加载器。

# SASS
npm i -D sass-loader sass

# Less
npm i -D less-loader less

# Stylus
npm i -D stylus-loader stylus

复制和引用图像

Webpack 无法自动扫描/处理 Edge 模板中引用的图像。因此,你必须提前告诉 Webpack 从特定目录复制图像。

你可以使用 copyFiles 方法将图像复制到构建输出。

Encore.copyFiles({
  from: './resources/images',
  to: 'images/[path][name].[hash:8].[ext]',
})

请确保使用 asset 助手来引用 img 标记内的图像。

<img src="{{ asset('assets/images/logo.png') }}" />

配置 Babel

我们使用 babel-loader 为所有具有 .js.jsx 扩展名的文件预先配置了 Babel。

你可以使用 Encore.configureBabel 方法进一步配置 Babel。

// 文件名: webpack.config.js
Encore.configureBabel((babelConfig) => {
  babelConfig.plugins.push('styled-jsx/babel')
  babelConfig.presets.push('@babel/preset-flow')
}, {
  exclude: /node_modules/
})

配置浏览器目标

你可以在 package.json 中为 @babel/preset-env 配置浏览器目标。

{
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
  ]
}

使用 .babelrc 文件

除了调用 configureBabel() ,你还可以使用标准的 .babelrc 文件。但是,这种方法有一个缺点:只要存在 .babelrc 文件,Encore 就可以不再配置 babel,而 .babelrc 文件会成为唯一的依据来源。

配置 React

你可以通过从 npm 安装 Babel 的 React 预设来配置 React。

npm i -D @babel/preset-react

接下来,在 webpack.config.js 文件中启用 React 预设。

Encore.enableReactPreset()

注意:
如果你使用 .babelrc 文件,你必须在里面启用 React 预设,因为 Encore 不能再配置 Babel。

配置 Vue

你可以通过在 webpack.config.js 文件中启用 Vue 加载器来配置 Vue。

// title: Vue 2
Encore.enableVueLoader(() => {}, {
  version: 2
})
// title: Vue 3
Encore.enableVueLoader(() => {}, {
  version: 3
})

接下来,为 Vue 2 或 Vue 3 安装以下必需的依赖项。

# title: Vue 2
npm i vue vue-loader @vue/compiler-sfc
# title: Vue 3
npm i vue@next vue-loader@next @vue/compiler-sfc

您可以通过将回调传递给 enableVueLoader 方法来定义 vue-loader 选项

Encore.enableVueLoader((options) => {
  options.transformAssetUrls = {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: ['xlink:href', 'href'],
    use: ['xlink:href', 'href']
  }
})

Encore 特定的选项可以被定义为第三个参数。

Encore.enableVueLoader(() => {}, {
  version: 3,
  runtimeCompilerBuild: false,
  useJsx: true
})

版本

要使用 VueJS ,你可以在 23 两个版本之间进行选择。


runtimeCompilerBuild

当使用单文件组件并且不想使用基于字符串的模板时,你必须禁用运行时编译器构建。


useJsx

在 Vue 模板中启用/禁用对 JSX 的支持。

  • 你无法使用 Vue3 启用该选项。
  • 使用 JSX 时需要安装 @vue/babel-preset-jsx@vue/babel-helper-vue-jsx-merge-props 依赖项。

添加自定义 Webpack 加载器

Encore 在封装最常见用例的设置方面做得很好,它允许你使用 addLoader 方法设置自定义加载程序。

Encore
  .addLoader({
      test: /\.handlebars$/,
      loader: 'cson',
  })

同样,你也可以使用 addPlugin 方法添加插件。

const NpmInstallPlugin = require('npm-install-webpack-plugin')
Encore.addPlugin(new NpmInstallPlugin())

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/adonisjs/5.x/ht...

译文地址:https://learnku.com/docs/adonisjs/5.x/ht...

上一篇 下一篇
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~