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

然后当我运行运行gulp的{{1}}时，我收到了错误消息。这是webpack

webpack.config.js

我已经尝试了我能想到的一切，但仍然无法让它发挥作用。我没有在任何地方使用ES6，而且我尝试过很多不同的反应启动器套件，但我无法让它工作。请帮忙!!!

P.S。我能够在本地克隆项目时运行该项目，并使用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; }构建app.js，如下所示：browserify

Answer 1

要解决此问题，如果您不是npm模块的作者，则需要删除行exclude: /node_modules/（但您应该使用其他模块）。

组件color-picker-react似乎没有编译jsx的发布版本或脚本。所以你需要自己做，并使用wepack动态编译jsx文件。

而不仅仅是移除exclude: /node_modules/

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

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

EDIT创建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 node_modules/react-ace/ {lib}文件夹出现时，你可以看到它夹

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

EDIT解释了反应颜色选择器模块需要做什么：

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

例如，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模块：

为npm模块创建一个webpack配置来处理使用jsx编写的react组件的转换（你可以使用这个模块https://github.com/securingsincity/react-ace设置libraryTarget: 'umd'的一些webpack配置你模块会更多易于使用各种模块系统（全球，AMD，CommonJS）。）
添加一个预先发布的脚本，用于输出颜色选择器的预编译版本（lib/pickedprecompiled.js）
将main更改为"main": "lib/pickedprecompiled.js",

反应webpack / browserify＆＃34;意外令牌＆＃34;

1 个答案: