与webpack一起使用canjs

Question

我正在尝试将canjs与webpack一起使用。我无法让它工作。任何帮助表示赞赏。

我做了以下内容：

方法1：

我安装使用NPM canjs和我main.js

require('can'); 

冉的WebPack命令。不工作。代码是使用窃取，我读了一些他们推荐安装canjs usinf bower的文章。

方法2：

使用亭子安装canjs现在我有canjs文件夹

amd 
amd-dev 
cjs // Common js 
steal 

我一直使用AMD之一，我做了以下4种中不同类型的代码。

• 我在我的webpack.config.js文件中添加了一个别名。 Webpack无法在can.js中找到这些文件。
• 加入 'AMD' 文件夹到modulesDirectories

`

var path = require('path'), 
    root = path.resolve(__dirname), 
    bowerPath = path.resolve(root, 'bower_components'); 


module.exports = { 
    context: path.resolve(root, 'app'), 
    entry: './main.js', 
    output: { 
     path: path.resolve(root, 'dist'), 
     filename: 'bundle.js' 
    },  
    resolve: { 
     root: root, 
     modulesDirectories: ['node_modules', 'amd'], 
     alias: { 
      'canjs': bowerPath + '/canjs/amd/can.js' 
     } 
    } 
} 

冉的WebPack命令，并得到了以下错误

ERROR in ./bower_components/canjs/amd/can/util/dojo.js 
Module not found: Error: Cannot resolve module 'dojo/main' in c:\AxxessProjects\axxess-billing-services\Axxess.RCM.BillingServices.Site\bower_components\canjs\amd\can\util 
@ ./bower_components/canjs/amd/can/util/dojo.js 11:0-482:2 24:4-99:6 100:4-105:6 

ERROR in ./bower_components/canjs/amd/can/util/dojo.js 
Module not found: Error: Cannot resolve module 'dojo/query' in c:\AxxessProjects\axxess-billing-services\Axxess.RCM.BillingServices.Site\bower_components\canjs\amd\can\util 
@ ./bower_components/canjs/amd/can/util/dojo.js 100:4-105:6 

ERROR in ./bower_components/canjs/amd/can/util/dojo.js 
Module not found: Error: Cannot resolve module 'dojo/NodeList-dom' in c:\AxxessProjects\axxess-billing-services\Axxess.RCM.BillingServices.Site\bower_components\canjs\amd\can\util 
@ ./bower_components/canjs/amd/can/util/dojo.js 100:4-105:6 

ERROR in ./bower_components/canjs/amd/can/util/vdom/make_parser.js 
Module not found: Error: Cannot resolve module 'simple-dom' in c:\AxxessProjects\axxess-billing-services\Axxess.RCM.BillingServices.Site\bower_components\canjs\amd\can\util\vdom 
@ ./bower_components/canjs/amd/can/util/vdom/make_parser.js 10:0-68:2 

ERROR in ./bower_components/canjs/amd/can/util/yui.js 
Module not found: Error: Cannot resolve module 'yui' in c:\AxxessProjects\axxess-billing-services\Axxess.RCM.BillingServices.Site\bower_components\canjs\amd\can\util 
@ ./bower_components/canjs/amd/can/util/yui.js 10:0-413:2 

ERROR in ./bower_components/canjs/amd/can/util/zepto.js 
Module not found: Error: Cannot resolve module 'zepto' in c:\AxxessProjects\axxess-billing-services\Axxess.RCM.BillingServices.Site\bower_components\canjs\amd\can\util 
@ ./bower_components/canjs/amd/can/util/zepto.js 10:0-328:2 

ERROR in ./bower_components/canjs/amd/can/util/mootools.js 
Module not found: Error: Cannot resolve module 'mootools' in c:\AxxessProjects\axxess-billing-services\Axxess.RCM.BillingServices.Site\bower_components\canjs\amd\can\util 

@ ./bower_components/canjs/amd/can/util/mootools.js 10:0-355:2 

在这一点上，我放弃了amd方法。

方法3：

决定用常见的JS来代替。从moduleDirectories中删除了amd，并将我的别名更改为指向cjs文件夹。

webpack.config.js改变：

resolve: { 
     root: root, 
     modulesDirectories: ['node_modules'], // Removed 'amd' 
     alias: { 
      'canjs': bowerPath + '/canjs/**cjs**/can.js' 
     } 
    } 

冉的WebPack命令。现在我只有2个错误。

WARNING in ./bower_components/canjs/cjs/view/view.js 
Critical dependencies: 
50:12-19 require function is used in a way in which dependencies cannot be statically extracted 
51:18-25 require function is used in a way in which dependencies cannot be statically extracted 
@ ./bower_components/canjs/cjs/view/view.js 50:12-19 51:18-25 

ERROR in ./bower_components/canjs/cjs/map/define/define.js 
Module parse failed: c:\AxxessProjects\axxess-billing-services\Axxess.RCM.BillingServices.Site\bower_components\canjs\cjs\map\define\define.js Line 15: Illegal return statement 
You may need an appropriate loader to handle this file type. 
| require('../../compute/compute.js'); 
| if (can.define) { 
|  return; 
| } 
| var define = can.define = {}; 
@ ./bower_components/canjs/cjs/can.js 13:0-33 

ERROR in ./bower_components/canjs/cjs/view/stache/add_bundles.js 
Module not found: Error: Cannot resolve module '@loader' in c:\AxxessProjects\axxess-billing-services\Axxess.RCM.BillingServices.Site\bower_components\canjs\cjs\view\stache 
@ ./bower_components/canjs/cjs/view/stache/add_bundles.js 10:13-32 

我对这两个错误深入了一下。

错误1：在地图的非法收益/定义/ define.js

改变了，如果条件 如果（can.define！）和移动代码的其余部分，如果条件里面，这固定。

错误2：@loader in view/stache/add_bundles。JS

我发现，在上述文件

var loader = require('@loader/'); 

这个说法我不知道什么@loader的用途。我不想惹它。

所以，你可以看到我无法使用webpack成功构建canjs。

我张贴这个发现是否有人尝试使用canpack与webpack并成功。

最终解决方案：

其次办法3与@Charles修改建议。

我现在webpack.config.js现在

module.exports = { 
    cache: true, 
    stats: true, 
    module: { 
     loaders: [ 
      { 
       test: /\.stache$/, 
       loader: 'raw' 
      } 
     ] 
    }, 
    resolve: { 
     modulesDirectories: [ 
      'node_modules', 
     ], 
     extensions: ['', '.js'], 
     alias: { 
      'can$': 'can/dist/cjs/can.js', 
      'can': 'can/dist/cjs' 
     } 
    } 
}; 

Answer 1

我遇到了你在你的第三个方法也做了同样的问题。我能够通过评论违规的'if'声明来解决define.js中的问题。对于@loader问题，我换成下面该行代码，它的工作：

var loader = require('raw!'); 

我还添加了装载机我webpack.config.js为stache文件：

loaders: [ 
    { test: /\.stache$/, loader: "raw" } 
] 

并补充原装载机NPM模块：

npm install --save-dev raw-loader 

在研究中，我对这个做了一下，似乎@loader是StealJS事情（StealJS Docs）

我猜can.js的cjs版本是基于stealJS版本，有人错过了一些转换？