svelte中的进口“svelte-routing`”

Question

我必须构建我的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 }]],
      },
    }
  ]
}

Answer 1

这是由于webpack无法处理代码的某些部分而触发的错误。要解决这个问题，您可以：

检查应用程序中是否有每个类型代码的加载程序。有时，外部库是用类型记录代替Javascript编写的，或者使用样式的预处理器(如SCSS )来代替传统的CSS。因此，您需要在Webpack配置中添加一条规则来翻译代码。(类型为javascript，scss为css)。但是，如果您的代码不使用Javascript和Svelte文件以外的其他类型的代码，并且只有当您导入瘦路由器时才会发生此错误，则此解决方案将无助于您(svelte-路由器只使用标准Javascript、css和.svelte代码)。

检查webpack是否可以访问您的node_modules目录。您的Webpack规则将检查每次Webpack将阅读一个文件。例如，如果您有一个.ts (类型记录)文件，webpack将检查您是否有它的规则。然后，它将使用正确的加载程序将该文件转换为其他文件。但是，如果您的规则要求排除您的node_modules目录，如果您在该文件夹中有一个.ts文件，webpack将不使用该规则，而是搜索另一条规则。

您应该删除"test: /.js$/“中的”排除“属性，以允许webpack在node_modules中查找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'],
    },
}