0

我仍然是 WebPack 的新手，但我已经尝试了我所知道的一切来让 Babel 在我的 WebPack 构建中运行。没运气。我被淘汰了。我知道它在这里的某个地方，但我找不到它。:(

错误信息

sleeper@sleeper-dev:~/WebPack_Projects/es6$ npm run build

> es6.local@0.0.1 build /home/sleeper/WebPack_Projects/es6
> webpack

clean-webpack-plugin: /home/sleeper/WebPack_Projects/es6/dist has been removed.
Hash: 2b1ea1575aadc16a2797
Version: webpack 3.10.0
Time: 699ms
        Asset       Size  Chunks             Chunk Names
app.bundle.js    7.45 kB       0  [emitted]  app
   index.html  186 bytes          [emitted]
   [0] ./src/js/index.js 1.63 kB {0} [built] [failed] [1 error]

ERROR in ./src/js/index.js
Module build failed: ReferenceError: [BABEL] /home/sleeper/WebPack_Projects/es6/src/js/index.js: Unknown option: /home/sleeper/WebPack_Projects/es6/.babelrc.babel. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.
    at Logger.error (/home/sleeper/WebPack_Projects/es6/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/home/sleeper/WebPack_Projects/es6/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
    at OptionManager.init (/home/sleeper/WebPack_Projects/es6/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/home/sleeper/WebPack_Projects/es6/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/home/sleeper/WebPack_Projects/es6/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/home/sleeper/WebPack_Projects/es6/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/home/sleeper/WebPack_Projects/es6/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/home/sleeper/WebPack_Projects/es6/node_modules/babel-loader/lib/index.js:175:20)
Child html-webpack-plugin for "index.html":
     1 asset
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 2 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! es6.local@0.0.1 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the es6.local@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sleeper/.npm/_logs/2018-02-03T23_46_47_365Z-debug.log

我的 package.json

{
  "name": "es6.local",
  "version": "0.0.1",
  "description": "JavaScript ES6 Testing Sandbox",
  "main": "index.html",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "author": "Preston Davis",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.18",
    "css-loader": "^0.28.9",
    "eslint": "^4.16.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.6.0",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}

我的 WebPack 配置

请注意：注释掉 Babel 规则后，一切正常！关闭注释，请参阅错误消息（如下）。

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

const config = {
  entry: {
    app: './src/js/index.js',
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['env', 'react'],
        },
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Development',
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

module.exports = config;

我的.babelrc

{
  "babel": {
    "presets": [
      "env"
    ]
  }
}

...和（为了完整起见）我的 index.js

真的没什么。主要是用于 webpack 构建测试的虚拟代码。

import '../css/style.css';
import printMe from './print';
import Thumbnail from '../img/100x100.png';

function component() {
  const element = document.createElement('div');
  const btn = document.createElement('button');
  element.textContent = 'Hello World';
  element.classList.add('hello');

  btn.innerHTML = 'Click me and check the console.';
  btn.onclick = printMe;
  element.appendChild(btn);

  // add thumbnail image to existing div
  const thumb = new Image();
  thumb.src = Thumbnail;
  element.appendChild(thumb);

  return element;
}

document.body.appendChild(component());
4

1 回答 1

2

我认为这可能是因为您的.babelrc其他一切似乎都很好。

试着把这个写到你的.babelrc

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

注意：json 中没有babel键。

我还建议安装babel-preset-es2015，这将使您的 .babelrc 看起来像

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

您可以query从 js 和 jsx 的 webpack 配置中删除该节点。

于 2018-02-04T05:59:03.137 回答