Browserify 找不到 npm 模块
Browserify cannot find npm module
我正在努力创建一个 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]
还是不行。
您的问题似乎是您将转译后的代码作为您的库提供。转译后的代码在内部包含 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.
您需要使 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 的解决方案。
我正在努力创建一个 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]
还是不行。
您的问题似乎是您将转译后的代码作为您的库提供。转译后的代码在内部包含 ReactMount。您应该提供用作库的源代码。然后它将使用 browserify 正确转译。查看任何其他 npm 库,我想您会看到它们提供了在您的导入中使用的源代码。
正如您在评论中指出的那样。
"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.
您需要使 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 的解决方案。