javascript - haml 的 webpack 配置

Question

所以我刚刚开始在我的项目中使用 webpack。我正在使用 webpack 尝试将我的 haml 模板编译为 jsx 以对元素使用react。为此，我使用了 haml-jsx 和 babel-loader 加载器。

所以，当 webpack 加载 .haml 模板时，我现在遇到的问题就出现了。我不断收到此错误“模块解析失败:意外 token 。您可能需要适当的加载程序来处理此文件类型”。 idk 是什么阻止了 haml-jsx 加载器正常工作，但正如我所说，我是 webpack 的新手所以 idk 如果它是我的 webpack 配置文件或其他东西。这就是我来找你们的原因!

以下是我的 webpack 配置文件:

const path = require('path');
module.exports = {
    entry:path.resolve(__dirname,"index.js"),
    module:{
        rules:[
            {
                test:/\.haml$/,
                use:[
                    {
                        loader:"babel-loader",
                        options:{
                            presets: ['@babel/preset-env'],
                            plugins: [require('@babel/plugin-syntax-jsx')]
                        }
                    },
                    {
                        loader:"haml-jsx-loader"
                    }
                ]   
            },
        ]
    },
    output: {
        filename:"bundle.js",
        path: path.resolve(__dirname,"/distro")
    },
};

我的目录结构也是这样的

webpack
-sass(dir)
-distro(dir)
-haml(dir)
  -tamplate.haml
-node_modules
-webpack.config.js
-babel.config.js
-index.js
-package.json

任何建议都会有所帮助!谢谢!

Answer 1

这个问题与haml 本身没有任何关系。加载器很好，除了其中一个无法解析 - 因此无法加载 - 给定文件这一事实。

查看您的 babel-loader 配置，您使用的是 React 这一事实是您问题的关键。 @babel/plugin-syntax-jsx 不是您要查找的内容。你应该使用 @babel/plugin-transform-react-jsx .

老实说，所有 babel 插件的文档实际上都非常糟糕。