如何为 svelte & rollup 添加手写笔支持

Question

我不知道我做错了什么。我只是想在我的 svelte 文件中使用手写笔。本质上，我想尝试适应 https://github.com/sveltejs/svelte-preprocess/tree/main/examples/sapper-rollup。如上所述使用打字稿和手写笔。

当我添加如下所示的手写笔代码时，我总是得到错误 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 但我不知道 know/understand 我做错了什么。

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 配置。你可能想检查一下。

如何为 svelte & rollup 添加手写笔支持

How to add stylus support to svelte & rollup

rollup

stylus

svelte