Svelte & Webpack - PullRequest
Новая
       14

Svelte & Webpack

0 голосов
/ 22 марта 2020

Я работаю над проектом MVC и должен импортировать svelte-routing :

import {Router, Route} из 'svelte-routing'

Но всегда появляется ошибка:

Неопознанная ошибка: сбой анализа модуля: неожиданный токен (9: 4) Вам может потребоваться соответствующий загрузчик для обработки этого типа файла.

, поскольку файл Router импортирует файл js

Мой svelte файл 

<script>
  import { onMount, onDestroy, setContext } from 'svelte'
  import Button from './driver/src/Button.svelte'
  import { Router, Route } from 'svelte-routing'
</script>

<Button />

Файл конфигурации моего веб-пакета: 

module.exports = {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    },
    {
      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
          }
        }
      ]
    }
  ]
}

.bubelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": 'usage'
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ],
    ["module-resolver", {
        "root": ["."],
        "alias": {
            "react": "preact-compat",
            "react-dom": "preact-compat",
            // Not necessary unless you consume a module using `createClass`
            "create-react-class": "preact-compat/lib/create-react-class",
            // Not necessary unless you consume a module requiring `react-dom-factories`
            "react-dom-factories": "preact-compat/lib/react-dom-factories"
        }
    }],
    ['transform-react-jsx', {pragma:'h'}],
    "@babel/plugin-proposal-class-properties",
    [
        "@babel/plugin-proposal-decorators",
        {
            "legacy": true
        }
    ]
  ]
}
...