1

我正在尝试将 babel-register 与我的 webpack 配置一起使用。这是我的文件：

.babelrc

{"presets": ["react","env"]}

webpack.config.js。

const path = require('path');

module.exports = {

    entry: {
        'app' : './src/app.jsx'
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },

    devServer: {
        contentBase: './dist',
        open: true
    }

};

包.json。

{
  "name": "react-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node -r babel-register ./node_modules/webpack/bin/webpack.js",
    "debug": "node -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.1"
  }
}

输出错误是：

ERROR in ./src/app.jsx
Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|   <h1>Hello, world!</h1>,
|   document.getElementById('root')
| );
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.jsx
i ｢wdm｣: Failed to compile.

我不明白为什么，使用 node 和 babel-register 模块启动 webpack，最后一个不转译遇到的所有后续文件。我知道最好使用 webpack 模块来转换 .js、.jsx，但我想在这个 repo 中模拟调试和生产模式的示例：https ://github.com/chentsulin/electron-react-boilerplate 谢谢你的回答。

4

1 回答 1

0

babel-register需要在源文件的上下文中导入，而不是 webpack。在运行 webpack 时要求它会转换 webpack 的代码，但不是你自己的。

一种方法是创建另一个文件，例如 main.js，然后导入 babel-register，然后是您的应用程序条目，并将 webpack 条目指向该文件：

import 'babel-register'
import './app.jsx'

另一种更简单的方法是将 babel-register 添加到 webpack 配置中的应用程序条目中，如下所示：

'app': ['babel-register', './src/app.jsx']
于 2018-03-10T11:54:25.737 回答