Question

我创建了一个简单的ES6反应组件模块：

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配置为编译此类

的响应代码

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

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

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

如果要将代码作为节点模块分发，请确保分发已转发的版本。有关如何自动执行此操作，请参阅prepublish npm script。

无法使用Webpack

1 个答案: