Multiple package.jsons with ES6 Babel

Question

I have a large project that I would like to divide up into multiple package.json's so that the dependencies for each part can be clearly stated and so those packages can be exported as individual parts.

However, I want my app to include each of these packages and compile them using webpack and babel. There are shared dependencies for the packages, so I don't want to just output each one to a /dist folder.

My ideal directory structure looks like this:

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

I tried multiple approaches:

1. Using webpack's resolve modules with something like path.resolve('app'). This just doesn't work, even though it should in theory.
2. Using main's package.json to reference others using "package1" : "file:../package1". This doesn't treat package1 as es6 javascript and throws errors. Using resolveLoaders in the webpack configuration does not help.

The webpack config I have is as follows.

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'],
}

Any thoughts or examples of other projects that do this would be appreciated!

Answer 1

You should check out lerna. It enables you to use multiple package.jsons and even packages in one repo. It might help you with you requirements.