Estoy tratando de transferir un proyecto antiguo de node-express para poder usar es6. He visto muchas publicaciones sobre el uso de Gulp con es6. La mayoría de ellos discuten el uso de una sintaxis como esta:
const gulp = require("gulp"); const babel = require("gulp-babel"); gulp.src('./index.js') .pipe( babel({ presets: [ ["@babel/env", { modules: false }], ], }) ) Sin embargo, el archivo gulp de mi proyecto existente no usa gulp.src en absoluto. En su lugar, utiliza gulp-develop-server . El archivo gulp se ve así:
const gulp = require("gulp"); const devServer = require("gulp-develop-server"); const spawn = require("child_process").spawn; const fs = require("fs"); const basedir = "."; function serverRestart(done) { // perform some cleanup code here devServer.restart(); done(); } function serverStart() { devServer.listen({ path: basedir + "/index.js", }); } function serverWatch() { serverStart(); gulp.watch( [ basedir + "/paths/**/*", // more directories to watch ], serverRestart ); } function reload(done) { serverWatch(); done(); } function defaultTask() { let p; gulp.watch(["gulpfile.js"], killProcess); spawnChild(); function killProcess(e) { if (p && !p.killed) { devServer.kill(); p.kill("SIGINT"); spawnChild(); } } function spawnChild() { p = spawn("gulp", ["reload"], { stdio: "inherit" }); } } process.stdin.resume(); process.on("exit", handleExit.bind(null, { cleanup: true })); process.on("SIGINT", handleExit.bind(null, { exit: true })); process.on("uncaughtException", handleExit.bind(null, { exit: true })); function handleExit(options, err) { // perform some cleanup code here if (options.cleanup) { devServer.kill(); } if (err) { console.log(err.stack); } if (options.exit) { process.exit(); } } gulp.task("serverRestart", serverRestart); gulp.task("serverStart", serverStart); gulp.task("serverWatch", serverWatch); gulp.task("reload", reload); gulp.task("default", defaultTask); El flujo existente es importante porque ejecuta el código necesario para la configuración y la limpieza cada vez que pulso guardar, lo que ejecuta serverRestart . He estado probando algunos métodos diferentes basados en las otras preguntas que recomiendan usar gulp.src().pipe() , pero no he tenido mucha suerte integrándolo con el patrón existente que usa gulp-develop-server. Estoy tratando de no tener que volver a escribir todo el archivo gulp. ¿Hay alguna forma sencilla de integrar babel con mi archivo gulp existente de modo que pueda usar es6 en mi código fuente?
Hay un ejemplo con CoffeeScript en la documentación de gulp-develop-server .
Usando eso como modelo, prueba esto:
function serverStart() { devServer.listen({ path: "./dist/index.js", }); } function serverWatch() { serverStart(); gulp.watch( [ basedir + "/paths/**/*", ], serverRestart ); } function serverRestart() { gulp.src('./index.js') .pipe( babel({ presets: [ ["@babel/env", { modules: false }], ], }) ) .pipe( gulp.dest( './dist' ) ) .pipe( devServer() ); } Dicho esto, su archivo Gulp existente en realidad no usa Gulp. Es decir, todo se define como una función y no aprovecha ninguna de las funciones útiles de Gulp, como la gestión de dependencias de tareas. Esto se debe a que (pre-es6), este era un proyecto muy simple. Las tareas de Gulp en ese archivo son una forma demasiado elaborada de ver archivos y ejecutar un servidor. Se podría hacer lo mismo (con menos código) usando nodemon .
Con la introducción de React y procesos de construcción más complicados, Gulp parece haber perdido el favor de la comunidad (y en mi experiencia personal, Gulp fue un sumidero de todos modos).
Si el cambio principal que desea realizar es usar import , simplemente puede usar una versión más reciente de Node. Seguramente se encontrará con el error SyntaxError: Cannot use import statement outside a module . Simplemente cambie el nombre del archivo a .mjs y funcionará. Esto proporciona una forma de migrar archivos de forma incremental para import la sintaxis. Otras funciones deberían funcionar automáticamente (y todas son compatibles con versiones anteriores, de todos modos). Una vez que su proyecto sea compatible en su mayoría, o en su totalidad, puede agregar "type": "module" a su archivo package.json , luego cambiar el nombre de todos sus archivos js de estilo require a .cjs y cambiar el nombre de todos sus archivos .mjs a .js , o déjelos como .mjs . Obtenga más información sobre las reglas para combinar importaciones de CommonJS y módulos en la publicación de blog de Node.js (tenga en cuenta que es posible que algunas cosas hayan cambiado desde que se escribió ese artículo).