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