Browserify无法找到npm模块

Question

我正在尝试创建一个非常痛苦的NPM模块:react-smallgrid

import React from 'react';
import _ from 'lodash';


export default class SmallGrid extends React.Component{

编译:

browserify: {
    options: {
        transform: [
            ['babelify', {
                presets: ['react', 'es2015']
            }]
        ]
    },

    jsx: {
        files: {
            './dist/js/smallgrid.js': [
                './src/smallgrid.jsx',
            ]
        }
    },

当我js在另一个项目/ jsx中导入文件并尝试浏览它时,它会给出错误:

错误:无法从'/ Users/me/code/react-smallgrid/dist/js'找到模块'./ReactMount'

我以为它已经编译好了吗？我不明白这一点.

与此同时

我尝试使用webpack构建它,它提供以下输出:

> webpack -p

Hash: 00fd87c95d39230bd485
Version: webpack 1.12.11
Time: 14002ms
       Asset    Size  Chunks             Chunk Names
smallgrid.js  248 kB       0  [emitted]  smallgrid
    + 160 hidden modules

WARNING in smallgrid.js from UglifyJs
Condition always true [./~/react/lib/ReactMount.js:764,0]
Condition always true [./~/react/lib/findDOMNode.js:46,0]
Condition always true [./~/react/lib/instantiateReactComponent.js:80,0]

仍然无法正常工作.

Answer 1

您需要使 React 库可供您的代码使用。

运行此命令以添加 browserify-shim：

npm i browserify-shim -D

将其添加到您的 package.json 中：

"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browser": {
  "react": "./node_modules/react/dist/react.js",
  "react-dom": "./node_modules/react-dom/dist/react-dom.js",
  "lodash": "./node_modules/lodash"
},
"browserify-shim": {
  "./node_modules/react/dist/react.js": "React",
  "./node_modules/react-dom/dist/react-dom.js": "ReactDOM",
  "./node_modules/lodash": "lodash"
}

顺便说一句，您还可以在配置中使用 browserify externals 来进一步减少生成的包。最好不要在你的包中包含例如：React。

笔记：

我还在 Github 上向您发送了PR以获取解决方案。