资源管理器

5.x

5.x

AdonisJS 中文文档 /

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.js 和 resources/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')

阻止资源编译#

你可以通过在 serve 和 build 命令中定义 --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 标签来呈现给定入口的脚本和样式标签。

标签将输出具有正确 href 和 src 属性的 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 ，你可以在 2 和 3 两个版本之间进行选择。

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...

Markdown 文本

贡献者：1

讨论数量: 0

发起讨论只看当前版本

暂无话题~

资源管理器

5.x

5.x

快速开始#

编译前端资源#

node ace serve --watch#

node ace build --production#

自定义输出目录#

阻止资源编译#

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

资源视图助手#

维护文件#

文件入口#

多入口#

引用模板文件中的入口#

设置 PostCSS#

设置 SASS、Less 和 Stylus#

复制和引用图像#

配置 Babel#

配置浏览器目标#

使用 `.babelrc` 文件#

配置 React#

配置 Vue#

版本#

runtimeCompilerBuild#

useJsx#

添加自定义 Webpack 加载器#

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

资源管理器 5.x 5.x

快速开始#

编译前端资源#

node ace serve --watch#

node ace build --production#

自定义输出目录#

阻止资源编译#

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

资源视图助手#

维护文件#

文件入口#

多入口#

引用模板文件中的入口#

设置 PostCSS#

设置 SASS、Less 和 Stylus#

复制和引用图像#

配置 Babel#

配置浏览器目标#

使用 .babelrc 文件#

配置 React#

配置 Vue#

版本#

runtimeCompilerBuild#

useJsx#

添加自定义 Webpack 加载器#

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

资源管理器

5.x

5.x

使用 `.babelrc` 文件#