Una gran oportunidad para usar interfaces JavaScript con REST WordPress API es mejorar la administración y la configuración de WordPress. Recientemente he escrito una publicación para el torque sobre el uso de REST y JQUEY API para construir configuraciones. Fue una buena introducción, pero normalmente usaría vuejs. En el futuro, escribiré más precisamente sobre cómo hacer esto con Vuejs, pero me gustaría cubrir dos puntos débiles importantes con los que traté, llegando al punto en que este es el mejor enfoque: la compilación de ES6 y la creación de plantillas. Soy un gran admirador de Vuejs por muchas razones. Es muy fácil comenzar y no necesita usar ninguna herramienta elegante o ES6 para usarla. Dicho esto, ES6 es una mejora importante en el lenguaje de JavaScript, por lo que escribir en ES6 hace que trabajar con Vuejs o cualquier JavaScript sea mucho mejor.
Una cosa que me pareció difícil aplicar lo que aprendí sobre ES6 en un entorno de WordPress fue que todo lo que aprendí sobre cómo configurar el instrumento involucró un proyecto tradicional HTML + JavaScript. Es genial para algo completamente desacoplado por WordPress, pero quería hacer esto en el administrador de WordPress. Después de algunos experimentos, hemos adaptado el flujo de trabajo Gulp que uso para minimizar los archivos JavaScript de los complementos de WordPress para usar Babel para compilar ES6 SAFE para el navegador. No será aprobado JS Hipster, pero funciona. Quiero mostrarle cómo funciona y discutir sobre algunos otros desafíos del trabajo de WP-Admin, como cómo construir su HTML.
Compilar ES6 ES6 es realmente genial y me gusta trabajar con él, pero aún no es seguro usarlo en todos los navegadores. Por ahora, Babel es la herramienta más confiable que he usado para crear un código ES5 seguro. Esto puede cambiar pronto, pero por ahora, dado que Internet Explorer es una cosa más, esto es una preocupación. Ya estoy usando Gulp para el minimento y la combinación de archivos JavaScript, por lo que quería quedarme con Gulp, pero para tener Babel, sabiendo que antes que tarde, podré eliminar a Babel. Parece que el uso de Babel con Gulp es relativamente simple. Primero, agregué Gulp-Babel a mi paquete. Aquí están ellos: “Devdependencias”: {
“Babel-Preset-Env”: “^1.4.0”,
“Gulp”: “^3.8.11”,
“Gulp-Babel”: “^6.1.2”,
“Gulp-Concat”: “^2.5.2”,
“Gulp-minify”: “0.0.15”,
“Gulp-minify-CSS”: “^1.1.1”,
“Gulp-Sass”: “^2.0.1”,
“Gulp-SourCeMaps”: “^2.6.0”,
“Gulp-Watch”: “^4.2.4”
} Con esto, pude agregar una compilación de Babel a mi proceso de construcción de JavaScript estándar:
const gulp = reequire (‘gulp’);
Const watch = request (‘gulp-watch’);
const minify = reequire (‘gulp-minify’);
const SourCeMaps = reequire (‘Gulp-SourCeMaps’);
Const babel = request (‘gulp-babel’);
consctCat = reequire (‘gulp-conccat’);
gulp.task (‘adminjs’, function () {
sorbo.
Src (‘./ Assets/JS/Admin/*. JS’). Pipe (SourCeMaps.init ()))
.pipe (Babel ({
Preset: [‘Env’] })
.pipe (conquistado (‘./ activos/js/admin.js’))
.Pipe (SourCeMaps.write (‘.’))
.pipe (minificar ({
ext: ‘min.js’,
NUSource: Falso,
Mangle: verdadero,
Compresión: verdadero
})
.pipe (gulp.dest (‘.’)
});
gulp.task (‘reloj’, function () {
gulp.watch (‘./assets/js/admin/*.js’, [‘adminjs’]);
});
gulp.task (‘default’, [‘adminjs’]); La configuración de las plantillas VueJS, así como Angular, utiliza plantillas HTML. Si no usara Vue en un contexto de WordPress, usaría un archivo HTML o un archivo .Vue para mis plantillas. Pero en WordPress, creo que es mejor usar un archivo PHP. ¿Por qué? Dos razones: traducciones y establecimiento de valores predeterminados.
Escribí sobre diferentes formas de incluir cadenas traducibles en una aplicación AngularJS para torque. Debatí el uso de PHP para reproducir las plantillas o el uso de wp_localise_script () para proporcionar cadenas traducidas a JavaScript. Hoy en día, para Angular o Vue, creo que el uso de PHP para crear plantilla hace que el proceso de traducción sea mucho más fácil. Aquí hay un ejemplo de una plantilla VueJS para un editor de publicaciones, como el archivo HTML que copié de mi artículo anterior, que presenta VueJS + API REST WordPress