在sapper/svelt中有一个组件的快捷方式

Question

在nuxts/vue中有一个别名@和~，表示应用程序的根。在sapper/svelte中有类似于在deep路由中的东西吗，比如/every/deep/page/1/2/3/4我不必做这样的事情：

import Head from '../../../../../../../../components/Thingy.svelte'

Answer 1

如果您正在使用rollup，您可以使用@rollup/plugin-alias获取它。

例如，在您的rollup.config.js:中

// ...
import alias from '@rollup/plugin-alias';
import path from 'path';
// ...
export default {
input: 'src/main.js',
// ...
plugins: [
// ...
alias({
resolve: ['.jsx', '.js', '.svelte'], // optional, by default this will just look for .js files or folders
entries: [
{ find: '@', replacement: path.resolve(__dirname, 'src') },
]
}),
// ...
],
// ...
};

然后@将是您顶层下src目录的别名。

如果您使用的是webpack，则可以使用resolve.alias-config属性。例如，在您的webpack.config.js:中

// ...
import path from 'path';
// ...
module.exports = {
// ...
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
// ...
};

Answer 2

您可以将它们放在像src/node_modules/components这样的目录中，然后就可以像import Foo from 'components/Foo.svelte'一样导入它们。只要确保该目录没有被gitignore！