javascript - 带有 ES6 Babel 的多个 package.jsons

Question

我有一个大项目，我想将其分成多个 package.json，以便可以清楚地说明每个部分的依赖关系，这样这些包就可以作为单独的部分导出。

但是，我希望我的应用程序包含这些包中的每一个，并使用 webpack 和 babel 编译它们。这些包有共享的依赖关系，所以我不想只将每个包输出到/dist 文件夹。

我理想的目录结构是这样的:

\main
    \app
    \node_modules
    package.json
\package1
    package.json
    node_modules
    index.js
\package2
    package.json
    node_modules
    index.js

我尝试了多种方法:

1. 将 webpack 的解析模块与类似 path.resolve('app') 的东西一起使用。这根本行不通，尽管理论上应该如此。
2. 使用 main 的 package.json 引用其他使用 "package1": "file:../package1"。这不会将 package1 视为 es6 javascript 并引发错误。在 webpack 配置中使用 resolveLoaders 没有帮助。

我的 webpack 配置如下。

module: {
loaders: [
    {
        test: /\.js?/,
        loader: 'babel-loader',
        include: [
            path.resolve('app'),
            path.resolve('../prose'),
        ],
        query: {
            plugins: [
                ['react-transform', {
                    transforms: [{
                        transform: 'react-transform-hmr',
                        // If you use React Native, pass 'react-native' instead:
                        imports: ['react'],
                        // This is important for Webpack HMR:
                        locals: ['module']
                    }]
                }],
                ['transform-object-assign']
            ]
        }
    },
    { test: /\.css$/, loader: 'style-loader!css-loader!sass-loader' },
    { test: /\.svg$/, loader: 'file-loader' },
    { test: /\.png$/, loader: 'file-loader' },
    { test: /\.jpg$/, loader: 'file-loader' },
    { test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
    modules: [
        path.resolve('app'),
        'node_modules',
    ],
    extensions: ['.json', '.js', '.jsx'],
}

任何其他项目的想法或例子都将不胜感激!

Answer 1

你应该看看 lerna .它使您能够在一个存储库中使用多个 package.jsons 甚至包。它可能会帮助您满足您的要求。