Question

我以前在一些简单的网页中使用了react.js一些我自己的组件，从CDN导入，避免使用JSX，并且在没有任何转换的情况下使用ES6。现在，我正在尝试使用webpack和babel找出更大的反应工具集。 Node和npm对我来说也是新手。

我有一点时间弄清楚为什么babel没有被调用来在index.js中转换我的JSX。我只使用webpack，只是尝试从生成的bundle.js调用一个console.log消息，并且工作正常（在我尝试添加react，babel，JSX或其他依赖项之前）。我尝试将babel配置预设放入项目根目录下的babelrc.js文件中，而不是放在webpack.config.js加载器中，但这似乎没有任何区别。我看了一堆简单的教程，但是他们似乎都做了稍微不同的事情，很难弄清楚我需要什么devDependencies（即babel-cli，或者babel，或者babel-loader，并且我不确定我是否最终遇到了某些版本不兼容或其他问题。

我在获取pacakges时收到以下npm警告：

npm WARN引擎webpack@2.7.0：想要：{“node”：“＆gt; = 4.3.0＆lt; 5.0.0 ||


= 5.10“}当前：{”node“：”5.4.1“，”npm“：”3.3.4“}）npm WARN已弃用babel-preset-es2015@6.14.0：感谢您使用Babel：我们推荐     现在使用babel-preset-env：请阅读babeljs.io/env进行更新！
    npm WARN安装无法安装可选依赖项：不支持     npm WARN engine enhanced-resolve@3.4.1：wanted：{“node”：“＆gt; = 4.3.0     ＆lt; 5.0.0 ||     = 5.10“}（当前：{”node“：”5.4.1“，”npm“：”3.3.4“}）npm WARN engine loader-runner@2.3.0：wanted：{”node“：”＆gt; = 4.3.0＆lt; 5.0.0 || ＆GT = 5.10" }     （当前：{“node”：“5.4.1”，“npm”：“3.3.4”}）

我没有尝试更改我的节点版本，以防可能导致我的开发环境（Windows 10 / VS2017）出现兼容性问题。

npm日志包含一条包含以下内容的错误消息，这让我觉得babel没有被调用来进行转换：

./index.js中的错误模块解析失败： C：\ Users \ Paul \ source \ WebSites \ MinimalReact \ index.js意外的令牌（8:15）您可能需要一个合适的加载器来处理这种文件类型。 | 导出类MySpan扩展了React.Component {| render（）{|
你好！ | } | };

环境： IDE：Visual Studio 2017 CE，节点v5.4.1， npm v3.3.4，

的package.json：

{
  "version": "0.0.1",
  "name": "test_react",
  "private": true,
  "devDependencies": {
    "webpack": "^2.5.1",
    "babel-loader": "7.1.2",
    "babel-cli": "6.14.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-es2015": "6.14.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": { "build": "webpack --config webpack.config.js" }
}

webpack.config.js：

"use strict";

module.exports = {
    entry: "./index.js",
    output: {
        filename: "./bundle.js",
        libraryTarget: "var",
        library: "MyModule"
    },
    module: {
        loaders: [
            {
                test:"/\.js$/",
                exclude: "/node_modules/",
                loader: "babel-loader",
                query: {
                    presets:["es2015", "react"]
                }
            }
        ]
    }
};

index.js：

"use strict";

import React from "react";
import ReactDOM from "react-dom";

class MySpan extends React.Component {
    render() {
        return <span>Hello!</span>; 
    }
};


function showContent() {
    var div = document.getElementById("display");
    ReactDOM.render(<MySpan/>, div);
};

export { MySpan, showContent};

Answer 1

啊，意识到了这个问题。您的test和exclude值应该是正则值，而不是字符串。删除外部引号以解决问题。

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}

在简单的react.js设置中让webpack调用babel来转换JSX的问题。

1 个答案: