Question

我正在使用webpack捆绑一个项目，我正在使用babel 6编译的这个配置（节点5，npm 3）：

import webpack from 'webpack';

export default {
  entry: './node_modules/graphql/graphql.js',
  output: {
    path: './build',
    filename: 'bundle.js',
    libraryTarget: "var",
    library: "graphql"
  },
  resolve: {
    extensions: ['', '.js']
  },
  devtool: 'eval'
};

然而，对于babel 6，当我运行webpack时，这会给我一个错误：

Output filename not configured.

如果我将此代码翻译回es5：

var webpack = require('webpack');

module.exports = {
  entry: './node_modules/graphql/graphql.js',
  output: {
    path: './build',
    filename: 'bundle.js',
    libraryTarget: "var",
    library: "graphql"
  },
  resolve: {
    extensions: ['', '.js']
  },
  devtool: 'eval'
};

它运作得很好。

我的.babelrc文件如下所示：

{
  "plugins": ["transform-es2015-modules-commonjs"]
}

我在本地node_modules中安装了以下软件包：

├── babel@6.0.15
├── babel-core@6.1.2
├── babel-loader@6.0.1
├── babel-plugin-transform-es2015-modules-commonjs@6.1.3
├── babel-runtime@6.0.14
├── graphql@0.4.12
└── webpack@1.12.3

修改在进一步检查Babel吐出的代码时，我认为我的问题是export default没有正确地转换为modules.export：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _webpack = require('webpack');

var _webpack2 = _interopRequireDefault(_webpack);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default = {
  entry: './node_modules/graphql/graphql.js',
  output: {
    path: './build',
    filename: 'bundle.js',
    libraryTarget: "amd",
    library: "graphql"
  },
  resolve: {
    extensions: ['', '.js']
  },
  devtool: 'eval'
};

如何让Babel使用transform-es2015-modules-commonjs插件将es6模块代码正确地转换为Node的模块格式？

Answer 1

看起来这个功能已被Babel弃用。

https://github.com/babel/babel/issues/2212

为什么我的webpack配置的es6版本给我一个错误，但es5版本没有？

1 个答案: