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

我为我的小部件设置了有效的marko设置。我正在使用webpack 4和babel7。当我将babel-loader添加到.marko文件时，webpack编译器将抛出异常，因为它无法将marko的语法识别为有效的javascript。但是，加载器应在标记拼写之后工作。

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 () {

索引标记

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>

webpack.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()
  ],
})

babel.config.js

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"
          }
        }
      ]
    ]
  }
}

最佳答案

从right to left评估webpack中的加载程序。在这种情况下，您希望@marko/webpack/loader是第一个运行的加载程序（将其放置在数组的最后），因此，在调用babel-loader时，.marko文件已编译为JS。

旁注：如果您正在使用发布到npm的Marko组件，则不想忽略node_modules。 Marko建议发布源.marko文件，因为编译器为服务器和浏览器生成不同的输出。此外，编译输出可能会有所不同，具体取决于您的应用程序所使用的Marko版本。

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