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 文件导入另一个 project/jsx 并尝试对其进行浏览器验证时，出现错误：

Error: Cannot find module './ReactMount' from '/Users/me/code/react-smallgrid/dist/js'

我以为它已经编译好可以使用了？我不明白这个。

同时

我试过用 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

您的问题似乎是您将转译后的代码作为您的库提供。转译后的代码在内部包含 ReactMount。您应该提供用作库的源代码。然后它将使用 browserify 正确转译。查看任何其他 npm 库，我想您会看到它们提供了在您的导入中使用的源代码。

正如您在评论中指出的那样。中的 @madox2 回复为；

"scripts": {
    "compile": "babel --presets es2015,stage-0 -d dist/js/ src/"
}

所以，npm install -g babel babel-preset-es2015 babel-preset-stage-0。然后 npm 运行编译。那应该将您的转译代码放入 dist/js.

Answer 2

您需要使 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 在你的 bundle 中。

注：

我也在 Github 中给你发了一个 PR 的解决方案。

Browserify 找不到 npm 模块

Browserify cannot find npm module

reactjs

npm

ecmascript-6

browserify

注：