Могу ли я иметь несколько точек входа, используя Rollup с Gulp?
У меня есть gulpfile.js
который использует Rollup для создания двух отдельных файлов JS (front-end и admin). rollup.config.js
Метод позволяет указывать несколько точек входа и связок, но для достижения этого с Gulp мне пришлось сделать немного неприятного обходного пути.
const javascripts = [
{
src: './app/assets/javascripts/main.js',
dest: './public/javascripts/main.js',
moduleName: 'main'
},
{
src: './admin/assets/javascripts/admin.js',
dest: './public/admin/javascripts/admin.js',
moduleName: 'admin'
}
]
gulp.task('js:compile', ()=> {
javascripts.forEach((item)=> {
return rollup({
input: item.src,
plugins: [
builtins(),
nodeResolve({ jsnext: true, browser: true }),
commonjs({
include: 'node_modules/**',
exclude: 'node_modules/rollup-plugin-node-globals/**',
ignoreGlobal: false,
sourceMap: true,
main: true,
browser: true
}),
json(),
buble()
]
}).then(function (bundle) {
return bundle.write({
format: 'iife',
name: item.moduleName,
file: item.dest
})
})
})
})
Есть ли лучший способ добиться этого? Я не против того, чтобы реорганизовать свои файлы, чтобы использовать глобирование или что-то подобное.
РЕДАКТИРОВАТЬ: я обновил его, чтобы использовать узлы fs
вместо того, чтобы указывать каждый сценарий, но это все еще кажется мне немного неуклюжим.
gulp.task('js:compile', () => {
fs.readdir('./app/assets/javascripts', (err, files) => {
if(err) throw err
files.forEach((file) => {
if(!file.match('.js')) return false
return rollup({
input: `./app/assets/javascripts/${file}`,
plugins: [
builtins(),
nodeResolve({ jsnext: true, browser: true }),
commonjs({
include: 'node_modules/**',
exclude: 'node_modules/rollup-plugin-node-globals/**',
ignoreGlobal: false,
sourceMap: true,
main: true,
browser: true
}),
json(),
buble()
]
}).then((bundle) => {
return bundle.write({
format: 'iife',
name: file.split('.')[-2],
file: `./public/javascripts/${file}`
})
}).catch( (e) => console.log(e) )
})
})
})
1 ответ
Теперь вы можете просто вернуть массив объектов из rollup.config.js
.
Итак, если вы
- нужно скомпилировать единый файл, вернуть объект
export default {...}
- необходимо скомпилировать несколько файлов, вернуть список объектов
export default [{...},{...},{...}, ...]
Ищите здесь вдохновение
Теперь вы можете использовать https://github.com/alfredosalzillo/rollup-plugin-multi-input, он также сохраняет дерево каталогов в выходном каталоге.
import multiInput from 'rollup-plugin-multi-input';
export default {
input: ['src/**/*.js'],
experimentalCodeSplitting: true,
output: {
format: 'esm',
dir: 'dist'
},
plugins: [ multiInput() ],
};
Вы можете использовать https://github.com/rollup/rollup-plugin-multi-entry, это позволяет многократную запись, как это
import multiEntry from "rollup-plugin-multi-entry";
export default {
input: "test/**/*.js",
plugins: [multiEntry()]
};
это также поддерживает exclude|include
исключить определенный тип файлов
// The usual rollup entry configuration works.
export default {
input: 'just/one/file.js',
plugins: [multiEntry()]
// ...
};
// As does a glob of files.
export default {
input: 'a/glob/of/files/**/*.js',
plugins: [multiEntry()]
// ...
};
// Or an array of files and globs.
export default {
input: ['an/array.js', 'of/files.js', 'or/globs/**/*.js'],
plugins: [multiEntry()]
// ...
};
// For maximum control, arrays of globs to include and exclude.
export default {
input: {
include: ['files.js', 'and/globs/**/*.js', 'to/include.js'],
exclude: ['those/files.js', 'and/globs/*.to.be.excluded.js']
},
plugins: [multiEntry()]
// ...
};