3

我正在尝试编写一个可以在运行时使用 webpack 动态加载的模块化组件系统。例如，当用户切换选项卡时，显示新选项卡内容的代码应该仅在用户单击该选项卡时加载。

这是完成此操作的一些代码（非常好，我可能会添加）：

onrender(){    
        this.observe("route", (route) => {
            if(route.length>0){
                this.set("loading", true);

                this.get("pages."+route).loadComponent((component) => {
                    this.components.Page = component.Component;
                    this.set("loading", false);
                });
            }
        });

    },

    data: {
        pages: {
            "#hello": {
                name: "Hello",
                loadComponent: (callback) => {
                    require.ensure([], () => {
                        callback(require("./page_component/hello/hello.js"));
                    });
                }
            },
            "#world": {
                name: "World",
                loadComponent: (callback) => {
                    require.ensure([], () => {
                        callback(require("./page_component/world/world.js"));
                    });
                }
            },
            "#activity": {
                name: "Individual Activity",
                loadComponent: (callback) => {
                    require.ensure([], () => {
                        callback(require("./page_component/individual_activity/assets/js/src/main.js"));
                    });
                }
            }
        }
     }

我已经完成了这项工作，但有一个警告。我正在使用 ES6 和 babel-loader 来加载它。包含选项卡的功能、模板、样式等的模块都必须直接包含在应用程序的目录结构中，如下所示（参见：page_components 目录）：

├── assets
│   ├── css
│   ├── js
│   │   ├── main.js
│   │   └── page_components
│   │       ├── hello
│   │       ├── individual_activity
│   │       └── world
│   └── templates
│       └── index.html
├── package.json
└── webpack.config.js

我希望每个页面组件都是它自己的包，带有 package.json，并通过例如： 包含在内require("individial_activity")，用于代码组织。

问题是，webpack 似乎没有node_modules通过任何加载器运行外部模块（例如通过 包含的模块），因此我在尝试加载 ES6 代码时收到有关意外符号的错误。

我尝试了and之类的东西require("babel-loader!individual_activity")，require("babel-loader!individual_activity/path/to/main.js")但无济于事。

我正在尝试做的事情不是正常的做事方式吗？我应该将所有模块的所有代码保存在同一目录结构中吗？我在做一些公然错误的事情吗？

webpack.config.js：

var webpack = require("webpack");

module.exports = {
    entry: ['./assets/js/main.js'],
    output: {
        path: './build',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader"
            }
        ]
    },
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                dead_code: true,
                conditionals: true,
                unsafe: false,
                warnings: false
            },
            mangle: false
        }),
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en.js/)
    ]
};

谢谢！

4

1 回答 1

2

将您的关注点分开是一个好主意，但我认为您将应用程序的每个部分都设置为 npm 包会矫枉过正。允许 npm 处理外部依赖和一次性库，而不是应用程序的高度依赖部分。

如果您正在寻找的只是更简洁的require()语句，请尝试将您的 js 目录添加到您的modulesDirectories配置中：

resolve: {
    modulesDirectories: ['node_modules',
                         'bower_components',
                         'assets/js',
                         'assets/js/page_components'],
},

然后应该允许您直接在内部需要模块，page_components而不需要路径或扩展名，例如require('individual_activity')

于 2015-03-30T20:13:08.707 回答