javascript - React项目简单导入不起作用

Question

这是我的模块。

src/components/Experiment.jsx

import React from 'react';

class Experiment extends React.Component {

  render() {
    if (Array.isArray(this.props.children)) {
      const activeVariant = this.props.children.filter((c) => {
        return c.props.id === this.props.activeVariant;
      });

      return (
        <div>
          {activeVariant}
        </div>
      );
    }
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
};

export default Experiment;

这是一个简单的模块，可以在自己的存储库上运行。就像我进行了测试一样，一切正常。

但是，一旦我将项目发布到私有(private) npm 并开始使用它。我收到此错误。

SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:414:25)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/ncharass/MyProjects/CN/project/lib/app/views/pages/app/views/pages/article.js:16:1)

这是导入行

import Experiment from '@organization/project/src/components/Experiment.jsx';

如果我将路径更改为没有 jsx 的 Experiment ，我会得到 Cannot find module 所以我知道它找到了该模块，但我'我不确定为什么会出现这样的错误。

我使用 webpack，这是配置。

'use strict';

var path = require('path');
var webpack = require('webpack');
var env = process.env.NODE_ENV || 'development';

module.exports = {
  devtool: env === 'development' ? '#cheap-inline-source-map' : '',
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        include: [
          /config/,
          /src/
        ],
        query: {
          babelrc: false,
          presets: [
            'es2015-webpack',
            'react'
          ]
        }
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'transform?envify',
        cacheable: true
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modules: [
      path.resolve('./src'),
      './node_modules'
    ]
  },
  plugins: env !== 'development' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        unused: true,
        dead_code: true //eslint-disable-line camelcase
      },
      output: {
        comments: false
      },
      sourceMap: true
    })
  ] : null
};

Answer 1

听起来你没有用 Babel 解析你的模块。 webpack 配置现在仅解析 config 和 src 中的模块。

听起来您正在尝试执行 ES6 模块，而您的浏览器在尚不支持的 ES6 上停滞不前(我最好的选择是 import 语句)