在下面的 Vue 案例中，Webpack 設定提供了 Pug 支持：
{
module: {
rules: [
// ...
{
test: /\.pug$/u,
oneOf: [
// For the single file components
{
resourceQuery: /^\?vue/u,
use: [ "pug-plain-loader" ]
},
// For the retrieving of the <template> part from the external file
{
use: [
{
loader: "html-loader",
options: {
minimize: { caseSensitive: true }
}
},
"pug-html-loader"
]
}
]
}
]
},
}
以上設定適用于 Svelte 嗎？我想沒有了，它也需要一些額外的軟體包，它提供混入喜歡 if()， each()等等。
錯誤示例：
ERROR in ./OverflowSafeSingleLineLabel.svelte
Module build failed (from ../node_modules/svelte-loader/index.js):
Error: ParseError: Unexpected token (12:29)
10: <script lang="ts">
11:
12: export const rootElementTag: string = "div";
^
13:
14: </script>
請不要向我推薦其他專案構建工具，例如 Rollup，因為當前的主題是 Webpack 適配。
uj5u.com熱心網友回復：
首先安裝svelte-preprocess：npm install --save-dev svelte-preprocess。然后調整 webpack 配置并告訴 Svelte 加載器預處理 Svelte 檔案：
import preprocess from 'svelte-preprocess'; // <-- this line is added
//...
test: /\.svelte$/,
loader: 'svelte-loader',
options: { preprocess: preprocess() } // <-- this line is added
現在，在您的 Svelte 檔案中，您需要lang=".."像使用 Vue 檔案一樣使用svelte-preprocess它來表示它需要在將內容交給 Svelte 編譯器之前對其進行預處理。
<script lang="ts">
const a: string = 'I can use TS in here';
</script>
<template lang="pug">
I can use pug in here
</template>
哈巴狗的語法有點不同，在這里解釋：https : //github.com/sveltejs/svelte-preprocess/blob/HEAD/docs/preprocessing.md#pug
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/366303.html