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

Question

我的小部件有一个有效的 Marko 设置。我使用的是 webpack 4 和 babel 7。当我将 babel-loader 添加到 .marko 文件时，webpack 编译器会抛出异常，因为它无法将 marko 的语法识别为有效的 javascript。然而，加载程序应该在 marko 转译之后工作。

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

索引.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 中的加载器从 right to left 进行评估。在这种情况下，您将希望 @marko/webpack/loader 成为第一个运行的加载器(将其放在数组的最后)，所以到了 babel-loader 时> 被调用，.marko 文件已经被编译为 JS。

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

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