與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版本，有人錯過了一些轉換？