webpack - 将 canjs 与 webpack 结合使用

Question

我正在尝试将 canjs 与 webpack 结合使用。我无法让它工作。如有任何帮助，我们将不胜感激。

我做了以下事情:

方法 1:

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

require('can');

运行 webpack 命令。不工作。代码使用steal，我读了一些他们建议安装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 命令。现在我只有两个错误。

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:map/define/define.js中非法返回

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

错误2:view/stache/add_bundles.js中的@loader

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

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

我不确定@loader 的用途。我不想搞乱它。

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

我发布这篇文章是为了了解是否有人尝试过将 canjs 与 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" }
]

并添加了 raw-loader npm 模块:

npm install --save-dev raw-loader

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

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