标签: browserify-shim

有很多类似的问题,包括堆栈溢出的答案,但没有一个对我有用,所以我在这里问你们.我感谢大家的时间.

我最近开始使用浏览器gulp,这非常有效.然后我尝试使用browserify作为前端使用:Backbone和Bootstrap3.

事情似乎有效,直到我尝试要求Bootstrap附带的js文件.我的chrome工具中出现错误,说明:jQuery未定义.

我试图将其填入,但我对垫片非常困惑.我正在使用jQuery 2.1.1,所以我不需要shim jQuery,但它现在存在于垫片中,因为我绝望并尝试了一切.这是我的package.json和我的main.js文件:

--------------的package.json ------------------

{
  "name": "gulp-backbone",
  "version": "0.0.0",
  "description": "Gulp Backbone Bootstrap",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Rob Luton",
  "license": "ISC",


  "devDependencies": {
    "jquery": "^2.1.1",
    "backbone": "^1.1.2",
    "browserify": "^4.2.1",
    "gulp": "^3.8.6",
    "vinyl-source-stream": "^0.1.1",
    "gulp-sass": "^0.7.2",
    "gulp-connect": "^2.0.6",
    "bootstrap-sass": "^3.2.0",
    "browserify-shim": "^3.6.0"
  },

  "browser": {
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
    "jQuery": "./node_modules/jquery/dist/jquery.min.js"
  },

  "browserify": {
    "transform": ["browserify-shim"]
  },

  "browserify-shim": {
    "jquery": "global:jQuery", 
    "bootstrap": {
      "depends": [
        "jQuery"
      ]
    } …

我使用browserify捆绑前端代码.到目前为止它一直都很棒,但我在混合npm和非npm包时遇到了困难.例如,使用nQuery版本的jQuery和非CJS版本的jQuery插件.

我目前的解决方案是使用browser键入package.json指向jQuery的dist,然后使用browserify-shim它作为插件的依赖项添加它.

有没有比我现在更清洁的方式来做到这一点？

编辑:我目前正在尝试使用npm并package.json管理所有依赖项,所以我不想在这个项目上使用bower.叫我疯了:)

的package.json

{
  "dependencies": {
    "jquery": "~2.1.0",
    "browserify": "latest",
    "browserify-shim": "^3.5.0",
    "jquery-waypoints": "git@github.com:imakewebthings/jquery-waypoints.git",
    "jquery-validation": "git://github.com/jzaefferer/jquery-validation"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "jquery-waypoints": "./node_modules/jquery-waypoints/waypoints.js",
    "jquery-validate": "./node_modules/jquery-validation/build/release.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "jquery-waypoints": {
      "depends": [
        "jquery"
      ]
    },
    "jquery-validate": {
      "depends": [
        "jquery"
      ]
    }
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

一些简短的背景:我正在使用browserify和browserify-shim(和gulp来构建)来创建一个Web应用程序.在这个问题之前,我正在require从npm开始jquery,所以我没有任何问题.一旦我开始进行一些优化,我就意识到包含jQuery的程度有多大.所以现在我从带有脚本标签的CDN抓取jQuery并将其放在bundle.js文件之前.但是我在将jQuery声明为全局并且在browserify和browserify-shim中正确填充我的jQuery插件时遇到了问题.当我运行gulp进行构建时,我不断收到同样的错误:

[gulp] gulp-notify: [Compile Error] module "jquery" not found from "/Volumes/Chetan/Users/cshenoy/Projects/urbanstems-node/app/plugins/jquery.inview.js"

似乎browserify-shim并没有意识到jQuery是一个全局性的.

作为参考,我正在使用inview插件.

这是我的package.json及相关部分

"browser": {
  "inview": "./app/plugins/jquery.inview.js"
},
"browserify-shim": {
  "jquery": "global:jQuery",
  "inview": {
    "depends": [
      "jquery"
    ]
  }
}

让我知道我还可以包含哪些内容来帮助诊断错误.

我是浏览器的新手,虽然它的好处似乎很有吸引力但我的用法并不完全清楚.

我有几个问题,希望有人能澄清一下.

1. 我看过有关在package.json中使用browserify-shim的博客帖子,包括第三方库,如jquery和bootstrap.我也看过使用gulp等工具生成捆绑文件的帖子.我似乎无法找到一个很好的答案,如果像gulp这样的工具能够自动化这个过程,为什么需要使用browserify-shim.有人可以解释一下吗？为什么甚至需要browserify-shim？我觉得gulp解决方案有点干净,虽然更多涉及.它不会污染package.json与browserify特定的东西,这是一个构建的东西,因此与gulp(只是我的个人意见)一起

2. 如何处理不在npm但不公开的第三方图书馆？例如,我们从第三方购买脚本.该脚本不是任何常见的js,而是具有一些依赖性的常规js文件(例如,在jquery和下划线上).

我正在学习browserify,我正在尝试用它做两件基本的事情:

1. 转换(通过shim)非CommonJS模块,以实现易用性和依赖性跟踪
2. 捆绑特定于项目的库

我找到了一个如何完成所有这些工作并使用Gulp自动化的工作流程.这工作并产生正确的输出,但我很好奇它是否可以变得更简单.好像我必须在基于项目的bundle上复制很多配置.这是工作示例:

package.json
_{添加了无效的注释以便澄清}

{
    //project info and dependencies omitted

    //https://github.com/substack/node-browserify#browser-field
    "browser": { //tell browserify about some of my libraries and where they reside
        "jquery": "./bower_components/jquery/dist/jquery.js",
        "bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.js"
    },
    "browserify": {
        //https://github.com/substack/node-browserify#browserifytransform
        "transform": [
            "browserify-shim"
        ]
    },
    "browserify-shim": { 
       //shim the modules defined above as needed 
        "jquery": {
            "exports": "$"
        },
        "bootstrap": {
            "depends": "jquery:$"
        }
    }
}

config.js
_{包含所有与任务运行器相关的配置设置}

module.exports = {

    browserify: {
        // Enable source maps and leave un-ulgified
        debug: true,
        extensions: [],
        //represents a …

我正在尝试重构一个使用Browserify的库,方法是使用browserify-shim从bundle中填充某些模块.具体来说,库使用require("codemirror"),但我想提供一个不包含CodeMirror的包,而是使用通过CDN提供的包.

所以我在package.json中有了browserify-shim配置

  "browserify-shim": {
    "jquery": "global:jQuery",
    "codemirror": "global:CodeMirror"
  }

到现在为止还挺好.要求("的jquery")和要求("codemirror")已从browserified束消失和由预期代码段抓住jQuery和CodeMirror关闭窗口对象的被取代.

该库还需要一些CodeMirror附加组件.例如require('codemirror/addon/hint/show-hint.js').没关系.我想要捆绑的附加组件.但是,在此附加组件中是一个包含require("../../ lib/codemirror")的UMD包装器.Browserify正在看到这个并且正在捆绑CodeMirror来自/node_modules /codemirror/lib/mirrormirror.js因为这个(我认为).我想让它使用在codemirror shim中定义的window.CodeMirror,但是无法解决它.尝试了许多变化,包括以下内容:

  "browserify-shim": {
    "jquery": "global:jQuery",
    "codemirror": "global:CodeMirror",
    "../../lib/codemirror": "global:CodeMirror",
    "codemirror/addon/hint/show-hint.js": { 
      "exports":null,
      "depends":["../../lib/codemirror:CodeMirror"]
    }
  }

那个要求("../../ lib/codemirror")不会消失!我确定我错过了什么.

我是用Gulp脚本运行的,但我不认为这应该有所不同.Browserify版本3.38.1.Browserify-shim版本3.7.0.

有任何想法吗？

使用最新节点和Grunt 0.4.x,反应0.10.x

什么通过Grunt在React JSX文件上执行browserify,这些文件需要jquery:

var $ = require('jquery');

在阅读了类似的问题后,尝试将填充变换移动到package.json中.在package.json文件的底部有以下内容:

  "browser": {
    "jquery": "./bower_components/jquery/jquery.min.js",
    "bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
  },
  "browserify-shim": {
    "jquery": {
      "exports": "$"
    },
    "bootstrap": {
      "exports": "bootstrap",
      "depends": [ "jquery:$" ]
    }
  },
  "browserify": {
    "transform": [ "browserify-shim" ]
  }

无法通过浏览器来解析一个简单的JavaScript文件(只有"var $ = require('jquery');)来自 Grunt.Gruntfile.js具有:

browserify: {
  options: {
    debug: true
  },

  src: ['src/views/**/*.js'],
  dest: 'build/javascript/client.js'
},

运行Grunt会出现以下错误:

Error: module "jquery" not found from "D:\\development\\projects\\Prenotes\\src\\views\\dummy.js"

如果我得到这个工作,那么我认为"reactify"可以添加到package.json中的转换数组中.

根据browserify-shim文档,您可以在以下语法中使用以下语法指定需要从旧模块公开的全局变量browserify-shim package.json:

{
    "browserify-shim": {
        "legacyModule": "myVar"
    }
}

我希望通过require('legacyModule')和访问遗留模块window.myVar.

根据我的经验,如果我试图使用的非公共模块使用window.myVar = x或仅仅myVar = x是模块,则模块在全局公开并且可以require()按预期使用.

但是,当遗留模块使用时var myVar = x,这就是导致问题的原因,因为模块只能通过require('legacyModule')而不是通过访问window.myVar.

该browserify-垫片文件指出:

此外,它还处理以下真实边缘情况:

• 只var foo = ...在脚本级别声明一个并假设它附加到window对象的模块.因为它们将被运行的唯一方式是在全球范围内 - "咳咳,......不？!"

我正在通过脚本标记下载google maps API v3,并且我使用以下(相关)package.json配置将依赖项添加到我的模块中:

"browserify-shim": {
   "google": "global:google"
}

我可以使用以下内容在我的文件中添加依赖项:

var google = require('google');

当我在浏览器中运行我的代码时,它工作正常.问题是,当我用Jest运行我的测试时,它告诉我它无法找到'google'模块:

Error: /src/app/assets/javascripts/__tests__/helpers-test.js: Cannot find module 'google' from '/src/app/assets/javascripts/__tests__'

注意:

我正在测试的文件中需要这种依赖关系,而不是测试本身.我发现这令人困惑,因为我认为除非另有说明,否则Jest会嘲笑所有依赖项,但从我可以看到,它首先需要在模拟之前正确地满足依赖项.

我有什么想法,或者我应该采取什么方法？

关于jQuery插件,我遇到了一个关于Browserify的令人费解的问题.由于我有多个单独的子应用程序包,我<script>在HTML中有一些全局库作为标记,以防止重复.

我正在使用gulp,browserify-shim并babelify创建我的捆绑.

内package.json:

"dependencies": {
  "jquery.cookie": "^1.4.1",
  ...
},
"browserify-shim": {
  "jquery": "global:jQuery",
   ...
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
}

内base.html:(在生产中这些将是CDN链接)

<!--[if lt IE 9]><script src="/bower_components/jquery-legacy/jquery.min.js"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!--<![endif]-->

在我的一个源文件中:

import $ from 'jquery'; // this works
import 'jquery.cookie'; // this crashes browserify

错误信息:

Error: Cannot find module 'jquery' from '/path/to/node_modules/jquery.cookie'

jQuery 没有和npm一起安装,因为我不希望它进入我的捆绑包.

我猜这里的问题是require('jquery')内部有一个调用jquery.cookie.js没有得到解决.

如何使用browserify-shim"伪装"全局jQuery实例的存在？

注意:这个解决方案 …