Question

我正在尝试编写一个模块化组件系统，可以在运行时使用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代码时会收到有关意外符号的错误。

我尝试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/)
    ]
};

谢谢！

Answer 1

将您的问题分开来是一个不错的主意，但我认为您的应用程序的每个部分都是npm包，这样做会有些过分。允许npm处理外部依赖项和一个off库，而不是应用程序的高度依赖部分。

如果您要查找的是清晰的require()语句，请尝试将您的js目录添加到modulesDirectories配置中：

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

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

Webpack将代码拆分成单独的模块，通过npm包含，如何编译es6？

1 个答案: