reactjs - head react

Browserify no puede encontrar el módulo npm

Question

Estoy intentando crear un módulo NPM con mucho dolor: react-smallgrid

import React from ''react'';
import _ from ''lodash'';
export default class SmallGrid extends React.Component{

Compilado con

browserify: {
options: {
transform: [
[''babelify'', {
presets: [''react'', ''es2015'']
}]
]
},
jsx: {
files: {
''./dist/js/smallgrid.js'': [
''./src/smallgrid.jsx'',
]
}
},

Cuando importo el archivo js en otro proyecto / jsx e intento identificarlo, aparece el error:

Error: No se puede encontrar el módulo ''./ReactMount'' desde ''/ Users / me / code / react-smallgrid / dist / js''

Pensé que ya está compilado para su uso? No entiendo esto

mientras tanto

He intentado construirlo con webpack, lo que da el siguiente resultado:

> 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]

Todavía no funciona.

Answer 1

Debe hacer que React libs esté disponible para su código.

Ejecute esto para agregar browserify-shim:

npm i browserify-shim -D

Agrega esto a tu 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"
}

Por cierto, también puede usar browserify externos en su configuración para reducir aún más el paquete resultante. Es mejor no incluir, por ejemplo: Reaccionar en tu paquete.

Nota:

También te envié un PR en Github para la solución.

Answer 2

Su problema parece ser que está proporcionando el código transpilado como su biblioteca. El código transpilado incluye ReactMount internamente. Debe proporcionar el código fuente para utilizarlo como biblioteca. Entonces se transpilará correctamente con browserify. Mire cualquier otra biblioteca de npm y creo que verá que proporcionan la fuente para usar en sus importaciones.

Como indicaste en tu comentario. @ madox2 en No se puede importar el módulo ES2015 respondido con;

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

Entonces, npm install -g babel babel-preset-es2015 babel-preset-stage-0. Entonces npm ejecuta compilar. Eso debería poner tu código transpilado en dist / js.