如何將手寫筆支持添加到 svelte & rollup

Question

我不知道我做錯了什么。 我只是想在我的苗條文件中使用手寫筆。 本質上，我想嘗試適應https://github.com/sveltejs/svelte-preprocess/tree/main/examples/sapper-rollup 。 使用 typescript 以及上述的手寫筆。

當我添加如下所示的手寫筆代碼時，我總是收到錯誤cannot read length of undefined 。 它適用於普通的 css。 例如 SCSS 也不起作用。

// rollup.config.js
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import config from 'sapper/config/rollup.js'
import path from 'path'
import pkg from './package.json'
import replace from '@rollup/plugin-replace'
import resolve from '@rollup/plugin-node-resolve'
import svelte from 'rollup-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess'
import typescript from '@rollup/plugin-typescript'
import url from '@rollup/plugin-url'
import { terser } from 'rollup-plugin-terser'

const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD

const onwarn = (warning, onwarn) =>
   (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
   (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
   (warning.code === 'THIS_IS_UNDEFINED') ||
   onwarn(warning)

export default {
   client: {
      input: config.client.input().replace(/\.js$/, '.ts'),
      output: config.client.output(),
      plugins: [
         replace({
            'process.browser': true,
            'process.env.NODE_ENV': JSON.stringify(mode)
         }),
         svelte({
            dev,
            hydratable: true,
            preprocess: sveltePreprocess({
               stylus: {
                  includePaths: ['src'],
               },
               postcss: {
                  plugins: [require('postcss-import')],
               },
            }),
            emitCss: true
         }),
         url({
            sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
            publicPath: '/client/'
         }),
         resolve({
            browser: true,
            dedupe: ['svelte']
         }),
         commonjs(),
         typescript({ sourceMap: dev }),

         legacy && babel({
            extensions: ['.js', '.mjs', '.html', '.svelte'],
            babelHelpers: 'runtime',
            exclude: ['node_modules/@babel/**'],
            presets: [
               ['@babel/preset-env', {
                  targets: '> 0.25%, not dead'
               }]
            ],
            plugins: [
               '@babel/plugin-syntax-dynamic-import',
               ['@babel/plugin-transform-runtime', {
                  useESModules: true
               }]
            ]
         }),

         !dev && terser({
            module: true
         })
      ],

      preserveEntrySignatures: false,
      onwarn,
   },

   server: {
      input: { server: config.server.input().server.replace(/\.js$/, ".ts") },
      output: config.server.output(),
      plugins: [
         replace({
            'process.browser': false,
            'process.env.NODE_ENV': JSON.stringify(mode)
         }),
         svelte({
            generate: 'ssr',
            hydratable: true,
            preprocess: sveltePreprocess(),
            dev
         }),
         url({
            sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
            publicPath: '/client/',
            emitFiles: false // already emitted by client build
         }),
         resolve({
            dedupe: ['svelte']
         }),
         commonjs(),
         typescript({ sourceMap: dev })
      ],
      external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),

      preserveEntrySignatures: 'strict',
      onwarn,
   },

   serviceworker: {
      input: config.serviceworker.input().replace(/\.js$/, '.ts'),
      output: config.serviceworker.output(),
      plugins: [
         resolve(),
         replace({
            'process.browser': true,
            'process.env.NODE_ENV': JSON.stringify(mode)
         }),
         commonjs(),
         typescript({ sourceMap: dev }),
         !dev && terser()
      ],

      preserveEntrySignatures: false,
      onwarn,
   }
}

這是一個示例代碼片段

// component
<style type="text/stylus">
  main
    position relative
    max-width 56em
    background-color white
    padding 2em
    margin 0 auto
    box-sizing border-box
</style>

我認為錯誤出現在我的 rollup.config.js 中，但我不知道/理解我做錯了什么。

Answer 1

這是svelte-preprocess和svelte@3.30之間的兼容性問題。

你不是唯一一個面臨這個問題的人（或者你是打開這個問題的人？）： https://github.com/sveltejs/svelte-preprocess/issues/284

這很可能是由於 Svelte 3.30 在預處理器中增加了對源映射的支持： https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3300

降級到svelte@3.29現在應該可以解決您的問題：

yarn add -D svelte@3.29

而且，嗯......會認為你需要在 Sapper 應用程序的client和server中完全相同的preprocess配置。 你可能想檢查一下。