在 webpack 中使用 canjs

Question

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

我做了以下事情：

方法一：

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

require('can');

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

方法2：

现在使用 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的方法。

方法 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

我对这两个错误进行了深入挖掘。

错误一：map/define/define.js中的非法返回

将 if 条件更改为 if(!can.define) 并将其余代码移到 if 条件中，这已修复。

错误 2：@loader 在 vi​​ew/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 中添加了一个加载器，用于 stache 文件：

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

并添加了 raw-loader npm 模块：

npm install --save-dev raw-loader

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

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