javascript - 无法使用 Webpack 加载 ES6 模块

Question

我创建了一个简单的 ES6 react 组件模块:

https://github.com/FezVrasta/react-resize-aware/blob/master/index.js

但是当我尝试使用 import ResizeAware from 'react-resize-aware' 加载它时，我得到:

./~/react-resize-aware/index.js
Module parse failed: /Users/fez/Projects/test/node_modules/react-resize-aware/index.js Unexpected token (69:6)
You may need an appropriate loader to handle this file type.

我在这里做错了什么？如果我将同一模块保存在我的项目文件夹中，则该模块可以完美运行。当我从 node_modules 加载它时它不起作用。

它给出错误:

return (
  <div {...this.props} style={rootStyle}>

这是我的 webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel?presets[]=es2015'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.styl$/,
        loaders: [
          'style?sourceMap',
          'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'stylus'
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      },
      {
        test: /\.(eot|woff|woff2|ttf)$/,
        loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
};

Answer 1

你已经配置了 webpack 来编译这样的 React 代码

{
    test: /\.js$/,
    loaders: ['react-hot', 'babel?presets[]=es2015'],
    include: path.join(__dirname, 'src')
},

您已将 include 仅指定为项目中的 src 目录。这是一个很好的做法，因为您不想转译所有的 node_modules。

Nodejs 可能理解大多数新的 ES6 语法，除了 ... 运算符。

如果您想将代码作为节点模块分发，请确保分发转译版本。请参阅prepublish npm script关于如何自动化此操作。