webpack - 以 svelte 导入 `svelte-routing`

Question

我必须构建我的 svelte 应用程序，但在尝试导入“svelte-routing”时总是出现错误

Uncaught Error :模块解析失败:意外的标记 (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 无法处理代码的某些部分。要解决此问题，您可以:

检查您的应用程序中是否有每种类型代码的加载器。有时，外部库是用 Typescript 而不是 Javascript 编写的，或者使用 SCSS 等样式预处理器而不是传统的 CSS。因此，您需要在 Webpack 配置中添加一条规则来翻译您的代码。 (typescript 到 javascript，scss 到 css)。但是，如果您的代码不使用 Javascript 和 Svelte 文件以外的其他类型的代码，并且仅在导入 svelte-router 时才会出现此错误，则此解决方案将无法帮助您(svelte-router 仅使用标准 Javascript、css 和 .svelte代码)

检查 webpack 是否有权访问您的 node_modules 目录。每次 Webpack 读取文件时都会检查您的 webpacks 规则。例如，如果您有一个 .ts(typescript)文件，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'],
    },
}