Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ionic-framework/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 如何通过npm发布基于react的组件而不包括react?_Node.js_Npm_Webpack - Fatal编程技术网

Node.js 如何通过npm发布基于react的组件而不包括react?

Node.js 如何通过npm发布基于react的组件而不包括react?,node.js,npm,webpack,Node.js,Npm,Webpack,我有一个简单的组件,需要使用react和mobx。当我通过webpack构建我的库时,它包括react和mobx以及mobx react。但是,我希望将它们添加为对等依赖项,并让模块的用户安装库 module.exports = { entry: [ './index.js' ], output: { path: path.resolve('./dist'), filename: 'build.js', library: 'myLi

我有一个简单的组件,需要使用react和mobx。当我通过webpack构建我的库时,它包括react和mobx以及mobx react。但是,我希望将它们添加为对等依赖项,并让模块的用户安装库

module.exports = {
    entry: [ './index.js' ],
    output: {
        path: path.resolve('./dist'),
        filename: 'build.js',
        library: 'myLibrary',
        libraryTarget: 'commonjs'
    },  
    module: {
        rules: loaders
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        })
    ]
}
这可能吗?我的webpack配置看起来像这样,它很好地构建到dist/build.js中,我只需要解决如何排除这些库

module.exports = {
    entry: [ './index.js' ],
    output: {
        path: path.resolve('./dist'),
        filename: 'build.js',
        library: 'myLibrary',
        libraryTarget: 'commonjs'
    },  
    module: {
        rules: loaders
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        })
    ]
}
您必须在package.json中标记为“外部”依赖项:

externals: { 'react': 'commonjs react' }
下面是一篇关于在npm Faillessy上发布组件的简短但非常有用的文章:


您需要对库的开发和测试构建与库的使用者实际使用的内容进行区分。他们很可能不需要使用预先构建的库

您的webpack构建可能仅用于您自己的开发目的,在这种情况下,将react和任何其他依赖项捆绑在构建中是完全正确和必要的

当消费者通过npm来使用您的库时,您的软件包通常应该将他们指向源代码index.js,而不是一个构建文件,他们自己的构建将通过
require
/
导入
跟踪依赖项并将其自身捆绑起来,在这种情况下,它将使用它们的对等依赖项,而不是您的libs依赖项

如果您希望直接通过web上的脚本标记或taget UMD commonJS生成供使用的版本,则只需要通过您自己的webpack配置预生成发行版。在这种情况下,您可以将您的网页配置和好友声明为
externals

如果仅通过作为节点模块导入来使用该文件,那么就足以为您希望由使用者提供的模块向包中添加对等依赖项,并确保引用了主文件,以便他们自己的构建知道从何处导入该文件

"main": "./index.js", // source code entry (this is what consumer requires, at which point their build will trace deps to react etc)
"peerDependencies": {
  "react": "*",
  "mobx-react": "*" // or required min versions
}

您还需要在
package.json
中将React标记为
peerDependency
,以便在您从NPM下拉组件时停止安装。这是我用来输出库的构建脚本