javascript - Webpack 外部依赖

Question

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

这是 webpack 的任务，并将我的 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 文件中使用 require 访问依赖项 React。

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依赖。但它告诉我 React 在 var HelloMessage = React 处未定义。

/** @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'));

这是 global-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))
});

我捆绑 conde 的 gulp 任务是这样的。仅指定不属于 bundle 一部分的外部依赖项。

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