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

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

下面是实现这一点的一些代码（我可能会补充说，非常好）：

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

我希望每个页面组件都是自己的包，带有package.json，并通过以下方式包含：例如：

require（“individialu活动”）

，以便于代码组织

问题是，webpack似乎没有通过任何加载程序运行外部模块（例如通过

节点_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/)
    ]
};

---

谢谢

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

如果您要查找的只是更干净的

require（）

语句，请尝试将js目录添加到

modulesDirectories

config:

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

然后应允许您直接在

page\u组件中要求模块，而无需路径或扩展，例如
require（“单个活动”）

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

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