Webpack外部依赖关系

Question

我有模块化的JavaScript应用程序，我需要在一个文件“global-libs.js”中有js框架，这些依赖关系可以使用webpack访问每个文件。其他js文件将只使用这些依赖关系，但它不会成为最终捆绑包的一部分。我使用Gulp来完成Webpack的这些任务。

这是任务的WebPack和transpile我的JSX到JS那里应该只是我的代码，而不是外部库

gulp.task('js',['jsx'], function() { 
    /**This dependency is external, its not part of the bundle */ 
    return gulp.src(config.paths.workDir + config.paths.jsPath + '/**/*.js') 
     .pipe(webpack({ 
      externals: { 
       "react": "React" 
      } 
     })) 
     .pipe(rename('onlyCustomJs.js')) 
     .pipe(gulpif(args.production, uglify())) 
     .pipe(gulp.dest(config.paths.portlets.newNotePortlet + config.paths.jsPath)) 
}); 

这个任务应该创建文件只能与外部组件库和依赖阵营应该使用要求进行访问每个js webpack文件。

gulp.task('global', function(){ 
    /**This will be accessible globally*/ 
    return gulp.src(config.paths.srcDir + config.paths.jsPath + '/global-libs.js') 
    .pipe(webpack({ 
     output: { 
      libraryTarget: "var", 
      library: "React" 
     } 
    })) 
    .pipe(rename('global-libs.js')) 
    .pipe(gulp.dest(config.paths.portlets.evremTheme + config.paths.jsPath)) 
}); 

此文件使用全局反应依赖项。但它告诉我，在做出反应VAR HelloMessage未定义=阵营..

/** @jsx React.DOM */ 
var React = require('react'); 

var HelloMessage = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
    } 
}); 

React.renderComponent(HelloMessage({name: "Hello world"}), document.getElementById('example')); 

这是全球libs.js文件

var React = require('react'); 
var jQuery = require('jquery'); 

谢谢！

Answer 1

也许这不是最好的解决方案，但我解决了这些变化。

//这些依赖关系将捆绑在一个global-libs.js文件中，并可通过require（）从任意位置访问。

module.exports = React = require('react'); 
module.exports = jQuery = require('jquery'); 

的WebPack仅合并这两个文件，并发布他们通过module.exports

gulp.task('global', function(){ 
    /**This will be accessible globally*/ 
    return gulp.src(config.paths.srcDir + config.paths.jsPath + '/global-libs.js') 
    .pipe(webpack()) 
    .pipe(rename('global-libs.js')) 
    .pipe(gulp.dest(config.paths.destDir + config.paths.jsPath)) 
}); 

我一饮而尽任务捆绑我的孔德是这样的。只有指定的外部依赖关系不属于该包的一部分。

gulp.task('js',['jsx'], function() { 
     /**This dependency is external, its not part of the bundle */ 
     return gulp.src(config.paths.workDir + config.paths.jsPath + '/**/*.js') 
      .pipe(webpack({ 
       externals: { 
        "react": "React", 
        "jquery": "jQuery" 
       } 
      })) 
      .pipe(rename('bundle.js')) 
      .pipe(gulpif(args.production, uglify())) 
      .pipe(gulp.dest(config.paths.destDir + config.paths.jsPath)) 
    }); 

结果我可以导入这样的依赖关系。

/** @jsx React.DOM */ 
var React = require('react'); 
var jQuery = require('jquery'); 

var HelloMessage = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
    } 
}); 

React.renderComponent(HelloMessage({name: "Hello world"}), jQuery('#example')[0]);