Question

我创建了没有同构结构的ReactJS webapp。我有index.html文件，我已经全局附加了所有足够的js库（例如jquery）。

现在我试图根据这个例子使我的webapp同构： https://github.com/yahoo/flux-examples/tree/master/react-router 我怎样才能全局附加jquery？

Answer 1

使用webpack，您可以使用ProvidePlugin注入隐式全局变量。它看起来像：

var webpack = require("webpack");

...

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    "root.jQuery": "jquery"
  })
]

修改
如果是没有密钥的其他库，我会设置它，就像你需要文件中的内容一样。所以不要这样做：

var _ = require('underscore')

你会使用ProvidePlugin：

plugins: [ new webpack.ProvidePlugin({ "_": "underscore" }) ]

Answer 2

在几个CommonJS模块中定义全局变量通常是一个坏主意，而不是在每个需要依赖的文件中使用require()语句。

CommonJS背后的想法是完全定义理论上可以在项目中添加或删除的单元，并且仍然可以清楚它们具有哪些依赖关系以及它们位于何处。

如果你查看你链接的Github仓库，你会注意到作者在每个仓库中都有一个单独的import React from 'react'声明，当它们全部依赖它时。虽然它可能看起来只是在文件的顶部添加了不必要的混乱，可以通过全局变量进行清理，但我认为它可以作为文档提供有关此特定组件所依赖的重要信息。

幸运的是，Webpack和Browserify等工具可以轻松地将多个组件及其依赖项捆绑到一个文件中，因此几乎不需要将jQuery作为全局变量包含在内。

我建议将jQuery作为npm模块安装。

npm install jquery --save

然后，您只需要在每个需要使用它的文件中执行var $ = require('jquery')。

完成后，您可以使用类似Browserify的内容捆绑您的组件和依赖项，并使用<script>标记将其导入index.html。只需将Browserify指向入口点（您的主要组件），然后让它完成其余的工作。像Gulp这样的构建工具将允许您使用简单的gulp build命令执行整个过程。这是一个Gulpfile示例，可以帮助您入门：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');

gulp.task('build', function () {
    browserify({
        entries   : 'path/to/mainComponent.js', //where your main component lives
        transform : [reactify] //transform jsx
    })
        .bundle()
        .pipe(source('bundle.js')) //create file named 'bundle.js'
        .pipe(streamify(uglify('bundle.js'))) //minify
        .pipe(gulp.dest('path/to/destination')); //where you want your 'bundle.js' to be placed
});

在使用之前，你需要做

npm install gulp-uglify vinyl-source-stream browserify reactify gulp-streamify --save-dev

和

npm install gulp-cli -g

希望这有帮助！

如何在没有index.html的情况下全局附加jquery？

2 个答案: