javascript - 我可以将 JS 代码从 Svelte 组件文件移动到其他文件 js 文件吗？

Question

我目前正在为我的下一个项目使用 Svelte 3 探索 Bucklescript/ReasonML。典型的 Svelte 组件是 .svelte文件:

<script>
  let name = 'world';
</script>

<h1>Hello world!</h1>

相反，我可以拥有 script带有 src 的标签或相当于将 JS 代码保存在单独的文件中？

<script src='./some-file.js'></script>

通过移动 js代码到一个单独的文件，Bucklescript 编译器的目标(这是一个 JS 文件)可以用于组件。

Vue.js 的 SFC .vue 已经支持这一点文件。

On a side note: I could use Vue.js for this but the presence Virtual DOM is problematic for legacy codebase. And, Svelte is diminishing at runtime and thus very much desirable. Also, the use this in Vue makes things awkward in Ocaml/Reason.

Answer 1

svelte.preprocess 可以做到这一点API，您最常通过 preprocess 访问rollup-plugin-svelte 或 svelte-loader 中的选项。像这样的东西应该可以工作(虽然我没有测试过):

const path = require( 'path' )
const fs = require( 'fs' )
...

plugins: [
  svelte({
    // ...
    preprocess: {
      script: ({ content, attributes, filename }) => {
        if ( 'string' === typeof attributes.src ) {
          const file = path.resolve(path.dirname(filename), attributes.src);
          const code = fs.readFileSync(file, 'utf-8');
          return {code, dependencies: [file]};
        }
      }
    }
  })
]