Browserify не может найти модуль npm

Я пытаюсь создать модуль 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 и пытаюсь его обозревать, он дает ошибку:

Ошибка: не удается найти модуль. /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]

Все еще не работает.

Ответ 1

Вам нужно сделать React libs доступным для вашего кода.

Запустите это, чтобы добавить прокрутку браузера:

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"
}

Кстати, вы также можете использовать браузеры externals в своей конфигурации для дальнейшего уменьшения полученного пакета. Лучше не включать, например: Реагировать на ваш пакет.

Примечание:

Я также отправил вам

Ответ 2

Ваша проблема заключается в том, что вы предоставляете преобразованный код в качестве вашей библиотеки. Преобразованный код включает в себя ReactMount внутренне. Вы должны предоставить исходный код для использования в качестве библиотеки. Затем он будет корректно перерисовываться с помощью браузера. Посмотрите на другие библиотеки npm, и я думаю, вы увидите, что они предоставляют источник для использования в вашем импорте.

Как вы указали в своем комментарии. @madox2 в Не удалось импортировать модуль ES2015, ответил:

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