Внешняя зависимость Webpack

Question

У меня модульное приложение javascript, и мне нужно иметь js-фреймворки в одном файле «global-libs.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)) 
}); 

Этот файл использует глобальную зависимость от зависимостей. Но он говорит мне, что React не определено в вар 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]);