我必须构建我的svelte应用程序，但在尝试导入"svelte routing"时总是出错
未捕获错误：模块解析失败：意外的令牌(7:11(您可能需要一个合适的加载程序来处理此文件类型
app.svelte
<script>
import { onMount, onDestroy, setContext } from 'svelte'
import { Router, Route } from 'svelte-routing'
</script>
<h1>Hello world!</h1>
package.json
{
"dependencies": {
"@rails/actioncable": "^6.0.1",
"@rails/webpacker": "3.5",
"axios": "^0.19.1",
"babel-core": "7.0.0-bridge.0",
"babel-loader": "7.0.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"css-loader": "^3.4.2",
"sirv-cli": "^0.4.5",
"svelte": "^3.19.2",
"svelte-loader": "^2.13.6",
"svelte-routing": "^1.4.1"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.40",
"@babel/core": "^7.0.0-beta.40",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/preset-env": "^7.0.0-beta.40",
"@babel/preset-react": "^7.0.0-beta.40",
"core-js": "3",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-dev-server": "^3.9"
}
}
webpack配置
module.exports = {
rules: [
{
test: /.svelte$/,
exclude: /node_modules/(?!svelte)/,
use: [
{ //babel loader after the svelte loader
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
},
{ //svelte loader first
loader: 'svelte-loader',
options: {
hydratable: true
}
}
]
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: [/node_modules/(?!svelte)/, /.legacy.js$/],
options: {
presets: [['@babel/preset-env', { modules: false, "useBuiltIns": 'usage', corejs: 3 }]],
},
}
]
}
这是因为webpack无法处理部分代码而触发的错误。要解决此问题，您可以：
检查您的应用程序中是否有每种类型代码的加载程序。有时，外部库是用Typescript而不是Javascript编写的，或者使用SCSS之类的样式预处理器而不是传统的CSS。因此，您需要在Webpack配置中添加一条规则来翻译代码。(typescript到javascript，scss到css(。但是，如果您的代码不使用Javascript和Svelte文件以外的其他类型的代码，并且只有在导入Svelte路由器时才会出现此错误，则此解决方案将对您没有帮助(Svelte路由仅使用标准Javascript、css和.Svelte代码(
检查webpack是否可以访问node_modules目录。每次Webpack读取文件时，都会检查您的Webpack规则。例如，如果你有一个.ts(typescript(文件，webpack会检查你是否有它的规则。然后它会使用正确的加载程序将这个文件翻译成其他文件。但是，如果您的规则要求排除node_modules目录，如果该文件夹中有一个.ts文件，webpack将不使用此规则，而是搜索另一个规则。
你应该删除你的"；排除"；属性在"；测试：/.js$/，"；允许webpack在nodemodule中查找javascript文件。您当前的线路正在阻塞它。
检查webpack是否可以解析应用程序中的每个扩展。如果不指定要打开的扩展名类型，Webpack可能无法打开特定的文件。您可以通过将这些行添加到您的webpack.config.js:来指定它
module.exports = {
resolve: {
alias: {svelte: path.resolve('node_modules', 'svelte')}, //Add that only if the line below fail.
extensions: ['.mjs', '.js', '.svelte', '.ts'],
},
}