我试图使用Webpack构建我的应用程序而不是RequireJS.一切都很好,如果我保持所有的依赖关系自足(例如,npm-安装我需要的一切);但是,Canvas已经提供了很多这样的依赖关系(例如React,jQuery),而在jQuery的情况下,它提供了一个我想使用的修补版本.这是我开始遇到问题的地方.
获得反应很容易; Canvas可以安装它,因此我可以在我的webpack config to point at it中添加一个别名:
alias: { 'react': __dirname + '/vendor/canvas/public/javascripts/bower/react/react-with-addons',}
(__dirname / vendor / canvas是我的应用程序树中的一个符号链接到主机Canvas应用程序的树)
我遇到麻烦的是尝试加载提供的jQuery副本.
Canvas具有以下jQuery结构:
/public/javascripts/jquery.js:
define(['jquery.instructure_jquery_patches'],function($) { return $; });
/public/javascripts/jquery.instructure_jquery_patches.js:
define(['vendor/jquery-1.7.2','vendor/jquery.cookie'],function($) { // does a few things to patch jquery ... // ... return $; });
/public/javascripts/vendor/jquery.cookie.js – 看起来像标准的jquery.cookie插件,包含在AMD中定义:
define(['vendor/jquery-1.7.2'],function(jQuery) { jQuery.cookie = function(name,value,options) { //...... }; });
最后,/public/javascripts/vendor/jquery-1.7.2.js.不会粘贴它,因为它是沼泽标准的jQuery1.7.2,除了AMD define has been made anonymous – 恢复它的股票行为没有什么不同.
我想要做一些像var $= require(‘jquery’)或从’jquery’导入$的东西,并且让webpack做任何魔术,使用jquery.instructure-jquery-patches需要做的很少的voodoo.
我尝试在我的webpack.config.js文件中添加resolve.root的路径:
resolve: { extensions: ['','.js','.jsx'],root: [ __dirname + '/src/js',__dirname + '/vendor/canvas/public/javascripts' ],alias: { 'react': 'react/addons','react/addons/lib': 'react/../lib' } },
这应该意味着当我做一个require(‘jquery’)时,它首先找到/public/javascripts/jquery.js,它定义一个以instructure_jquery_patches为依赖的模块.这属于instructure_jquery_patches,它定义了一个具有两个依赖关系的模块(‘vendor / jquery-1.7.2′,’vendor / jquery.cookie’).
在我的主要入口点(@L_404_7@)中,我正在导入jQuery(也尝试了一个commonjs要求,没有区别),并尝试使用它:
import React from 'react'; import $from 'jquery'; $('h1').addClass('foo'); if (__DEV__) { require('../scss/main.scss'); window.React = window.React || React; console.log('React: ',React.version); console.log('jQuery:',$.fn.jquery); }
用webpack构建捆绑包似乎工作;没有错误.当我尝试在浏览器中加载页面,但是,我从jquery.instructure-jquery-patches.js中得到一个错误:
看来jQuery在jquery.instructure-jquery-patches中是不可用的.
然而,在页面加载之后,它在全局范围内可用,因此正在评估和执行jQuery.
我的猜测是,我遇到某种需求/异步异步问题,但这是一个黑暗中的一枪.我不知道requirejs或amd肯定知道.