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文件支持此功能。

在旁注：我可以为此使用Vue.js，但是对于旧代码库，虚拟DOM的存在存在问题。而且，苗条在运行时会逐渐减少，因此非常理想。另外，在Vue中使用this会使Ocaml / Reason感到尴尬。

Answer 1

这可以通过svelte.preprocess API来实现，您通常可以通过rollup-plugin-svelte或svelte-loader中的preprocess选项来访问。这样的事情应该可以工作（尽管我还没有测试过）：

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

Answer 2

据我所知，目前不可能。

您可以做的是从js文件中导出所需的所有内容，然后将其导入组件中：https://svelte.dev/repl/1d630ff27a0c48d38e4762cf6b0c2da5?version=3.7.1

<script>
 import { name } from './mycode.js'
</script>

<h1>Hello {name}!</h1>

export let name = 'World';

但是，这只是部分解决方案，因为文件中发生的任何数据突变都不会触发DOM的重新呈现，因为Svelte不会编译.js文件并且无法添加自己的代码使值无效：https://svelte.dev/repl/c4b41b769ed747acb01a02a9af33e545?version=3.7.1

<script>
 import { name, handleClick } from './mycode.js'
</script>

<h1 on:click={handleClick}>Hello {name}!</h1>

export let name = 'World';
export const handleClick = () => {
    name = 'Everyone';
}

但这并不意味着您愿意花更多的精力来实现这一目标：https://svelte.dev/repl/8e259df629614ac99cb14cfae2f30658?version=3.7.1

<script>
 import { name, handleClick } from './mycode.js'

 const onClick = () => {
     handleClick();
     name = name;
 }
</script>

<h1 on:click={onClick}>Hello {name}!</h1>

export let name = 'World';
export const handleClick = () => {
    name = 'Everyone';
}

强制进行DOM更新的多余行name = name。

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

2 个答案: