У меня есть большой проект, который я хотел бы разделить на несколько package.json так, чтобы зависимости для каждой части могли быть четко указаны и поэтому эти пакеты можно экспортировать как отдельные части.Несколько package.jsons с ES6 Babel
Однако, я хочу, чтобы мое приложение включало каждый из этих пакетов и скомпилировало их с помощью webpack и babel. Для пакетов существуют общие зависимости, поэтому я не хочу просто выводить их в папку/dist.
Моя идеальная структура каталогов выглядит следующим образом:
\main
\app
\node_modules
package.json
\package1
package.json
node_modules
index.js
\package2
package.json
node_modules
index.js
Я попробовал несколько подходов:
- Использование модулей разрешать WebPack с чем-то вроде
path.resolve('app')
. Это просто не работает, хотя теоретически. - Использование основного пакета package.json для ссылки на другие, используя
"package1" : "file:../package1"
. Это не рассматривает package1 как es6 javascript и вызывает ошибки. Использование resolveLoaders в конфигурации webpack не помогает.
Конфигурация 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'],
}
Любые мысли или примеры других проектов, которые сделают это, будут оценены!