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

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 处理外部依赖和一次性库，而不是应用程序的高度依赖部分。

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

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

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

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

Webpack splitting code into separate modules included via npm, how to compile es6?

javascript

npm

ecmascript-6

webpack

babeljs