узел es6 неправильно импортируется

Question

У меня есть следующий оператор экспорта в app.js:

export default class App {
    ...
}

Теперь у меня есть следующий оператор импорта в main.js:

import App from '../../src/app.js'

Это должно работать, у меня естьделал это всегда без проблем, но каким-то образом приложение не определено.

Теперь, когда я делаю следующее:

const App = require('../../src/app');

Приложение - это объект, который содержит свойство default, которое содержитКласс «App». Может кто-нибудь объяснить, что мне здесь не хватает?

мой файл webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: {
    'single-spa.config': './single-spa.config.js',
  },
  output: {
    publicPath: '/dist/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
        {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'babel-loader',
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      },
      {
          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: [{
              loader: 'url-loader?limit=10000&mimetype=application/font-woff'
          }],
      },  {
          test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: [{
              loader: 'file-loader'
          }]
      }
    ],
  },
  node: {
    fs: 'empty'
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    },
    modules: [path.resolve(__dirname, 'node_modules')],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  devtool: 'source-map',
  externals: [],
  devServer: {
    historyApiFallback: true
  }
};

.babelrc:

{
  "presets": [
    "@babel/preset-env"
  ]
}

package.json:

{
  "name": "vue-micro-frontend-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --config webpack.config.js -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.1",
    "bootstrap": "^4.3.1",
    "bootstrap-select": "^1.13.5",
    "cross-env": "^5.1.3",
    "flag-icon-css": "^3.2.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "jquery-ui-dist": "^1.12.1",
    "jquery-validation": "^1.17.0",
    "lodash": "^4.17.15",
    "popper.js": "^1.12",
    "sass-loader": "^8.0.0",
    "select2": "^4.0.6-rc.1",
    "single-spa": "^4.4.1",
    "single-spa-vue": "^1.5.4",
    "url-loader": "^2.2.0",
    "uuid": "^3.3.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-loader": "^0.5.5",
    "image-webpack-loader": "^6.0.0",
    "node-sass": "^4.13.0",
    "style-loader": "^1.0.0",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

Answer 1

Это немного раздражает, но я почти уверен, что Node не поддерживает синтаксис импорта и экспорта ES6.

Вот публикация в стеке, в которой более подробно рассматривается этот вопрос.

Как я могу использовать импорт es6 в узле?