Webpack с реагируют модули давая неожиданный маркер

Question

пытается использовать модуль НПМ реагировать-спин, но когда я пытаюсь построить bundle.js с WebPack, я получаю следующее сообщение об ошибке:

Module parse failed: /Users/nir/browsewidget/node_modules/react-spin/src/main.js Line 29: Unexpected token < 
You may need an appropriate loader to handle this file type. 
| render: function() { 
|  return (
|  <span ref="container" /> 
| ); 
| } 
@ ./js/widget.jsx 4:14-35 

Я угадывание что в этом модуле есть jsx, но я не понимаю, почему он не может быть построен? Требуется ли какая-либо дополнительная конфигурация при создании пакета?

Вот мой полный webpack.config.js:

module.exports = { 
    entry: "./js/widget.jsx", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
        test: /\.jsx$/, 
        loader: 'jsx-loader?insertPragma=React.DOM&harmony' 
      } 
     ] 
    }, 
    externals: { 
     //don't bundle the 'react' npm package with our bundle.js 
     //but get it from a global 'React' variable 
     'react': 'React' 
    }, 
    resolve: { 
     extensions: ['','.js','.jsx'] 
    } 
}; 

Answer 1

Ваш погрузчик настроен только преобразование файлов, которые заканчиваются в .jsx:

test: /\.jsx$/, 

(Знак доллара означает КОНЕЦ of-string.)

Вы можете изменить его на

test: /\.jsx?$/, 

преобразовать оба .js и .jsx файлов, но работает каждый файл JavaScript в node_modules через загрузчик JSX, вероятно, будет довольно медленным.

Я считаю, что вы должны быть в состоянии установить exclude вариант /node_modules/, а затем в include вариант для конкретного модуля вы заботитесь о (react-spin), но лучшим решением является то, что пакеты не использовать JSX в опубликованной версии JavaScript Автор react-spin может быть открыт для запроса на растяжение. (Edit: оказывается уже есть один, см thomasboyt/react-spin#3)

Наконец, react-spinis very small, так что вы человек рассматривает возможность реализации его самостоятельно в собственном проекте (так что вам не придется беспокоиться о проблемах WebPack погрузчика).