Babel破坏了我的WebPack Build

时间:2018-02-03 23:55:16

标签: webpack babel babel-loader

我还是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());

1 个答案:

答案 0 :(得分:2)

我认为这可能是因为你location_dest_id = fields.Many2one(default="_default_location_dest_id") @api.model def _default_location_dest_id(self): picking_type_id = self._context.get('default_picking_type_id') if not picking_type_id: return self.env['stock.location'] picking_type = self.env['stock.picking.type'].browse(picking_type_id) if picking_type.force_destination: # return 1 # use an Odoo default external id here return self.env.ref('stock.stock_location_stock') else: return picking_type.default_location_dest_id 其他一切似乎都没问题。

尝试将此内容写入.babelrc

.babelrc

注意:json中没有{ "presets": ["env", "react"] } 项。

我还建议安装babel,这会使你的.babelrc看起来像

babel-preset-es2015

您可以从webpack配置中删除js和jsx的{ "presets": ["env", "react", "es2015"] } 节点。