反應webpack / browserify“意外令牌”

Question

我有我創建的這個npm模塊 ，每次我嘗試包含它以查看它是否有效我都會收到此錯誤：

Unexpected token <
You may need an appropriate loader to handle this file type.

我已經使用了react-starterkit並將其包含在main.js中

var ReactDOM = require('react-dom');
var ColorPicker = require('color-picker-react');
ReactDOM.render(<ColorPicker />, document.getElementById('app'));

然后當我運行gulp它運行webpack我得到的錯誤。 這是webpack.config.js

module.exports.getConfig = function(type) {

  var isDev = type === 'development';

  var config = {
    entry: './app/scripts/main.js',
    output: {
      path: __dirname,
      filename: 'main.js'
    },
    debug : isDev,
    module: {
      loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }]
    }
  };

  if(isDev){
    config.devtool = 'eval';
  }

  return config;
}

我已經嘗試了所有我能想到的東西，仍然無法讓它發揮作用。 我沒有在任何地方使用ES6，我嘗試過很多不同的反應啟動器套件，但我無法讓它工作。 請幫忙！！！

PS我能夠獲得這個項目時，我在本地復制它來運行和構建了app.js與browserify像這樣： browserify -t [ babelify --presets [ react ] ] app.js -o bundle.js

Answer 1

要解決此問題，您需要刪除行exclude: /node_modules/如果您不是npm模塊的作者（但您應該使用另一個模塊）。

組件color-picker-react似乎沒有編譯jsx的發布版本或腳本。 所以你需要自己做，並使用wepack動態編譯jsx文件。

而不僅僅是刪除exclude: /node_modules/

您可以使用正則表達式模式排除/node_modules/color-picker-react文件夾以外的所有/node_modules/ ：

//will exclude all modules except `color-picker-react`
exclude: /node_modules\/(?!color-picker-react).*\//,

編輯創建npm模塊的基礎知識 ：

npm模塊的正確設置是添加預發布腳本以確保在上載到NPM之前自動進行編譯。

因此，當您將模塊推送到npm時，用戶無需編譯模塊，他們只需要它。

以node_module為例： https ： //github.com/securingsincity/react-ace/blob/master/package.json

package.json文件說明當您需要模塊時哪個文件是入口點

 "main": "lib/ace.js",

您可以在github存儲庫中看到lib文件夾不存在，因為添加到.gitignore但是行

  "prepublish": "npm run clean && npm run build"

在上傳到NPM之前運行，所以在npm存儲庫中存在lib /文件夾，當你執行npm install --save react-ace時可以看到它npm install --save react-ace lib文件夾出現在node_modules/react-ace/文件夾中

一個很棒的鏈接，解釋了如何在es6中構建npm模塊，例如http://javascriptplayground.com/blog/2015/10/authoring-modules-in-es6/

EDIT解釋了反應顏色選擇器模塊需要做什么：

抱歉，我沒有看到您是該模塊的作者，因此您應該使用下面的解決方案 。

例如，反應顏色選擇器沒有預發布腳本，主文件是index.js

var ColorPicker = require('./colorpicker.js'); // require a file with jsx will throw an error if not precompiled 

module.exports = ColorPicker;

因此拋出了語法錯誤。

為了能夠在其他應用程序中使用npm模塊：

1. 為npm模塊創建一個webpack配置來處理使用jsx編寫的react組件的轉換（你可以使用這個模塊的一些webpack配置https://github.com/securingsincity/react-ace set libraryTarget: 'umd'您可以從各種模塊系統（全局，AMD，CommonJS）更容易地使用模塊。）
2. 添加一個preublish腳本，輸出顏色選擇器的預編譯版本（ lib/pickedprecompiled.js ）
3. 將main更改為"main": "lib/pickedprecompiled.js",