javascript - react webpack/browserify "unexpected token"

Question

我有这个npm module我创建的，每次我尝试包含它以查看它是否有效时，我都会收到此错误:

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'));

然后，当我运行运行 webpack 的 gulp 时，我得到了错误。这是 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，我尝试过许多不同的 React 入门工具包，但我就是无法让它工作。请帮忙!!!

附言当我在本地克隆项目并使用 browserify 构建 app.js 时，我能够让项目运行，如下所示:browserify -t [ babelify --presets [ react ]] app.js -o bundle.js

Answer 1

要解决此问题，如果您不是 npm 模块的作者，则需要删除行 exclude:/node_modules/ ).

组件 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 模块的编辑基础知识:

A correct setup for a npm module is to add a prepublish script to ensure compilation happens automatically before uploading to 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 时看到它lib文件夹出现在node_modules/react-ace/文件夹

一个很好的链接，解释了如何在 es6 中构建 npm 模块，例如 http://javascriptplayground.com/blog/2015/10/authoring-modules-in-es6/

编辑解释 react-color-picker 模块需要做什么:

抱歉，我没有看到您是该模块的作者，所以您应该使用下面的解决方案。

例如，react-color-picker 没有预发布脚本，主要文件是 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. 添加预发布脚本，输出颜色选择器的预编译版本 (lib/pickedprecompiled.js)
3. 将 main 更改为 "main": "lib/pickedprecompiled.js",