将 canjs 与 webpack 结合使用

Question

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

我做了以下事情：

方法一：

我使用 npm 安装了 canjs，在我的 main.js

require('can');

运行 webpack 命令。不工作。代码使用了 steal，我读了一些他们推荐安装 canjs usinf bower 的文章。

方法二：

现在使用 bower 安装了 canjs 我在 canjs 文件夹中有 4 种不同类型的代码

amd
amd-dev
cjs // Common js
steal

我一直使用 amd 并且我做了以下操作。

我在 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的做法。

方法三：

决定改用普通的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

我对这 2 个错误进行了深入研究。

错误一：map/define/define.js

中非法的return

将 if 条件更改为 if(!can.define) 并将其余代码移至 if 条件内，此问题已修复。

错误 2：@loader 在 view/stache/add_bundles.js

我在上面的文件中找到了这条语句

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

我不确定@loader 是做什么用的。我不想惹它。

因此，如您所见，我无法使用 webpack 成功构建 canjs。

我发布这篇文章是为了了解是否有人尝试过将 canjs 与 webpack 一起使用并成功。

最终解：

按照@Charles 建议的方法 3 进行更改。

我现在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 中添加了一个用于缓存文件的加载程序：

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

并添加了 raw-loader npm 模块：

npm install --save-dev raw-loader

在我对此所做的一些研究中，@loader 似乎是 StealJS 的东西 (StealJS Docs)

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

将 canjs 与 webpack 结合使用

Using canjs with webpack

webpack

canjs

webpack-dev-server