巴贝尔不能用webpack 4转换.marko文件

Question

我已经为我的小部件准备了一个有效的marko设置。我使用webpack 4和babel 7。当我向.marko文件中添加babel-加载程序时，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 () {

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>

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

Answer 1

webpack的装载机由从右到左评估。在本例中，您希望@marko/webpack/loader是第一个运行的加载程序(将其放在数组中)，因此在调用babel-loader时，.marko文件已经编译到JS。

附带注意:如果使用已发布到npm的Marko组件，则不希望忽略node_modules__。Marko建议发布源文件.marko文件，因为编译器为服务器和浏览器生成不同的输出。此外，根据应用程序使用的Marko版本，编译输出可能有所不同。

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