Javascript 无法使用webpack 4转换.marko文件

我的小部件有一个有效的marko设置。我正在使用Webpack4和Babel7。当我将babel loader添加到.marko文件时，webpack编译器会抛出，因为它无法将marko的语法识别为有效的javascript。但是，加载程序应在marko Transfilation之后工作

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Volumes/Workspace/product-curator-widget/src/index.marko: A class name is required (1:6)

> 1 | class {
    |       ^
  2 |   onCreate () {

index.marko

class {
  onCreate () {
    this.state = {
      items: [ {label: 'foo'}, {label: 'bar'} ] 
    }
    const pr = new Promise((resolve) => resolve()) //trying to transpile this arrow function
  }
}


<paper>
  <chip for (item in state.items) label="${item.label}" value="${item.value}" />
</paper>

babel.config.js

'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = () => ({
  mode: 'development',
  devtool: 'cheap-source-map',
  entry: [
    'core-js',
    './src/index.js'
  ],
  resolve: {
    extensions: ['.js', '.marko'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/, /\.test\.js$/],
        use: ['babel-loader'],
      },
      {
        test: /\.marko$/,
        exclude: [/node_modules/, /\.test\.js$/],
        use: ['@marko/webpack/loader', 'babel-loader'],
      },
      {
        test: /\.scss$/,
        exclude: [/node_modules/],
        use: ['style-loader', 'css-loader', 'sass-loader'],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
})

module.exports = function (api) {
  api.cache(true)

  return {
    "plugins": [
      "@babel/plugin-proposal-object-rest-spread",
      "@babel/plugin-transform-async-to-generator",
      "@babel/plugin-transform-regenerator",
    ],
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "ie": "10"
          }
        }
      ]
    ]
  }
}

---

Web包中的加载程序是从中评估的。在本例中，您希望@marko/webpack/loader是第一个运行并将其放在数组最后的加载程序，因此在调用babel加载程序时，.marko文件已编译为JS

旁注：如果您使用的是已发布到npm的Marko组件，则不希望忽略节点_模块。Marko建议发布源.Marko文件，因为编译器为服务器和浏览器生成不同的输出。此外，编译输出可能会因应用程序使用的Marko版本而异

---

非常感谢您的澄清。虽然这确实不会破坏编译器，但@babel/present env仍然不会传输标记。在本例中，我的babel.config.js已被明确加载，但不会转换常量或箭头函数。我编辑了我的巴别塔配置的原始帖子

      {
        test: /\.marko$/,
        use: ['babel-loader', '@marko/webpack/loader'],
      },