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

【问题标题】：How to attach jquery globally without index.html?如何在没有 index.html 的情况下全局附加 jquery？
【发布时间】：2015-10-13 04:44:03
【问题描述】：

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

现在我正在尝试根据此示例使我的 webapp 同构： https://github.com/yahoo/flux-examples/tree/master/react-router 如何全局附加 jquery？

【问题讨论】：

你可以使用 npm 模块 stackoverflow.com/questions/21674080/… 或者我会做的是使用 webpack 并有 jQuery 插件
我确实使用 webpack。如何在没有 npm 的情况下全局附加 jquery？另外，我可以将它用作 npm 模块，但是我怎样才能一次在所有 js 文件中“要求”它呢？

标签： reactjs webpack

【解决方案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"
  }) 
]

【讨论】：

我还有几个js库，应该注入。他们没有像“$”这样的键。

【解决方案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

希望这会有所帮助！

【讨论】：