無法使用webpack 4轉換.marko文件

Question

我為我的小部件設置了有效的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 () {

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'],
      },