在父目录中创建Svelte Web组件

Question

我正在尝试使用svelte构建Web组件。如果使用默认文件结构，一切都可以正常工作，但是在我的特定项目中，我需要对文件进行重新处理以将src文件移至更高级别的目录。换句话说，这是正常工作的正常文件结构：

dev
  - dist
  - src
    - Component.svelte
    - index.js
  package.json
  rollup.config.js
index.html

这是我需要的设置：

dev
  - dist
src
  - Component.svelte
  - index.js
  package.json
  rollup.config.js
index.html

注意，我已经将src文件夹上移了一层。同时，我更新了rolup.config.js文件，如下所示：

export default {
  input: '../src/index.js',
  output: [
    { file: pkg.module, format: 'es' },
    { file: pkg.main, format: 'umd', name },
  ],
  plugins: [svelte({ customElement: true }), resolve()],
} 

注意input: '../src/index.js'。

问题是，当我运行它时，它不起作用。同时，我在运行npm run build时收到的消息明显不同。这是我使用标准文件结构时的输出：

> SvelteComponent@ build C:\laragon\www\svelte3\dev
> rollup -c


src/index.js → dist/index.mjs, dist/index.js...
created dist/index.mjs, dist/index.js in 188ms

这是带有修改后的文件结构的输出：

> SvelteComponent@ build C:\laragon\www\svelte3\dev
> rollup -c


../src/index.js → dist/index.mjs, dist/index.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
svelte/internal (imported by ..\src\Component.svelte)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
svelte/internal (guessing 'internal')
created dist/index.mjs, dist/index.js in 81ms

请注意，额外的消息：

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
svelte/internal (imported by ..\src\Component.svelte)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
svelte/internal (guessing 'internal')

所以，话虽如此，我必须怎么做才能使其正常工作？感谢您提供的任何帮助。

谢谢。

Answer 1

Rollup的input字段与配置文件无关，而与当前工作目录有关。只需使用src/index.js