javascript - react - angularjs vs bootstrap diferencias
¿Necesito require js cuando uso babel? (3)
Estoy experimentando con ES6, y estoy usando gulp para construir y babel para transpilar a ES5. La salida no se ejecuta en el nodo, solo se vincula desde un archivo .htm con una etiqueta. Estoy pensando que necesito agregar
<script src=''require.js''></script>
o algo así.
Estoy tratando de importar / exportar.
////////////////scripts.js
import {Circle} from ''shapes'';
c = new Circle(4);
console.log(c.area());
/////////////////shapes.js
export class Circle {
circle(radius) {
this.radius = radius;
}
area() {
return this.radius * this.radius * Math.PI;
}
}
El error es
Uncaught ReferenceError: require is not defined
Se refiere a esto (después de .pipe (babel ()) en trago)
var _shapes = require(''shapes'');
¿Necesito require js cuando uso babel?
Es posible que necesite algún cargador de módulos, pero no es necesario RequireJS. Tienes varias opciones. Lo siguiente lo ayudará a comenzar.
rollup.js con rollup-plugin-babel
Rollup es un paquete de módulos JavaScript de próxima generación. Entiende los módulos ES2015 de forma nativa y producirá un paquete que no necesita ningún cargador de módulos para funcionar. Las exportaciones no utilizadas se recortarán de la salida, se llama sacudida de árbol.
Ahora personalmente recomiendo usar rollupjs, ya que produce la salida más clara y es fácil de configurar, sin embargo, le da un aspecto diferente a la respuesta. Todos los otros enfoques hacen lo siguiente:
- Compile el código ES6 con babel, use el formato de módulo que prefiera
- Concatene los módulos compilados junto con un cargador de módulos O use un paquete que atraviese las dependencias por usted.
Con rollupjs las cosas realmente no funcionan de esta manera.
Aquí, el rollup es el primer paso, en lugar de Babel.
Solo entiende los módulos ES6 de forma predeterminada.
Debe proporcionar un módulo de entrada del cual se atravesarán y concatenarán las dependencias.
Como ES6 permite múltiples exportaciones con nombre en un módulo, rollupjs es lo suficientemente inteligente como para eliminar las exportaciones no utilizadas, reduciendo así el tamaño del paquete.
Lamentablemente, el analizador rollupjs-s no comprende la sintaxis de ES6, por lo que los módulos ES7 deben compilarse antes de que el paquete acumulativo los analice, pero la compilación no debería afectar las importaciones de ES6.
Se realiza utilizando el
rollup-plugin-babel
con el
babel-preset-es2015-rollup
(este preset es el mismo que el es2015, excepto el transformador del módulo y el plugin de ayuda externa).
Por lo tanto, el paquete acumulativo hará lo siguiente con sus módulos si está configurado correctamente:
- Lee su módulo ES6-7 del sistema de archivos
- El complemento babel lo compila a ES6 en la memoria
- paquete acumulativo analiza el código ES6 para importaciones y exportaciones (utilizando un analizador de bellotas, compilado en paquete acumulativo)
- atraviesa todo el gráfico y crea un paquete único (que aún puede tener dependencias externas, y las exportaciones de la entrada pueden exportarse, en el formato que elija)
Ejemplo de compilación de nodejs:
// setup by `npm i rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev`
// build.js:
require("rollup").rollup({
entry: "./src/main.js",
plugins: [
require("rollup-plugin-babel")({
"presets": [["es2015", { "modules": false }]],
"plugins": ["external-helpers"]
})
]
}).then(bundle => {
var result = bundle.generate({
// output format - ''amd'', ''cjs'', ''es6'', ''iife'', ''umd''
format: ''iife''
});
require("fs").writeFileSync("./dist/bundle.js", result.code);
// sourceMaps are supported too!
}).then(null, err => console.error(err));
Ejemplo de construcción de grunt-rollup con grunt-rollup
// setup by `npm i grunt grunt-rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev`
// gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks("grunt-rollup");
grunt.initConfig({
"rollup": {
"options": {
"format": "iife",
"plugins": [
require("rollup-plugin-babel")({
"presets": [["es2015", { "modules": false }]],
"plugins": ["external-helpers"]
})
]
},
"dist": {
"files": {
"./dist/bundle.js": ["./src/main.js"]
}
}
}
});
}
Ejemplo de Gulp Build con gulp-rollup
// setup by `npm i gulp gulp-rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev`
// gulpfile.js
var gulp = require(''gulp''),
rollup = require(''gulp-rollup'');
gulp.task(''bundle'', function() {
gulp.src(''./src/**/*.js'')
// transform the files here.
.pipe(rollup({
// any option supported by Rollup can be set here.
"format": "iife",
"plugins": [
require("rollup-plugin-babel")({
"presets": [["es2015", { "modules": false }]],
"plugins": ["external-helpers"]
})
],
entry: ''./src/main.js''
}))
.pipe(gulp.dest(''./dist''));
});
Babelify + Browserify
Babel tiene un paquete ordenado llamado Babelify . Su uso es simple y directo:
$ npm install --save-dev babelify babel-preset-es2015 babel-preset-react
$ npm install -g browserify
$ browserify src/script.js -o bundle.js /
-t [ babelify --presets [ es2015 react ] ]
o puede usarlo desde node.js:
$ npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-react
...
var fs = require("fs");
var browserify = require("browserify");
browserify(["./src/script.js"])
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.pipe(fs.createWriteStream("bundle.js"));
Esto transpilará y concatenará su código de una vez.
El .bundle de
.bundle
incluirá un pequeño y agradable cargador CommonJS y organizará sus módulos transpilados en funciones.
Incluso puede tener importaciones relativas.
Ejemplo:
// project structure
.
+-- src/
| +-- library/
| | /-- ModuleA.js
| +-- config.js
| /-- script.js
+-- dist/
/-- build.js
...
// build.js
var fs = require("fs");
var browserify = require("browserify");
browserify(["./src/script.js"])
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.pipe(fs.createWriteStream("dist/bundle.js"));
// config.js
export default "Some config";
// ModuleA.js
import config from ''../config'';
export default "Some nice export: " + config;
// script.js
import ModuleA from ''./library/ModuleA'';
console.log(ModuleA);
Para compilar simplemente ejecute
node build.js
en la raíz de su proyecto.
Babel + WebPack
Compila todo tu código usando babel.
Le recomiendo que use el transformador de módulo amd (llamado
babel-plugin-transform-es2015-modules-amd
en babel 6).
Después de eso, agrupa tus fuentes compiladas con WebPack.
¡Ya salió WebPack 2! Entiende los módulos ES6 nativos y realizará (o más bien simulará) sacudidas de árboles utilizando la eliminación de código muerto incorporado de babili -s. Por ahora (septiembre de 2016), aún sugeriría usar rollup con babel, aunque mi opinión podría cambiar con el primer lanzamiento de WebPack 2. Siéntase libre de discutir sus opiniones en los comentarios.
Canalización de compilación personalizada
A veces quieres tener más control sobre el proceso de compilación. Puede implementar su propia tubería de esta manera:
Primero, debe configurar babel para usar módulos amd. De forma predeterminada, babel se transfiere a los módulos CommonJS, lo cual es un poco complicado de manejar en el navegador, aunque browserify logra manejarlos de una manera agradable.
-
Babel 5: use la opción
{ modules: ''amdStrict'', ... } -
Babel 6: use el
es2015-modules-amd
No olvides activar el
moduleIds: true
opción
moduleIds: true
.
Verifique el código transpilado para los nombres de módulos generados, a menudo hay desajustes entre los módulos definidos y requeridos. Ver sourceRoot y moduleRoot .
Finalmente, debe tener algún tipo de cargador de módulos, pero no es necesario. Hay almondjs , un pequeño requerimiento de cuña que funciona bien. Incluso puede implementar su propio:
var __modules = new Map();
function define(name, deps, factory) {
__modules.set(name, { n: name, d: deps, e: null, f: factory });
}
function require(name) {
const module = __modules.get(name);
if (!module.e) {
module.e = {};
module.f.apply(null, module.d.map(req));
}
return module.e;
function req(name) {
return name === ''exports'' ? module.e : require(name);
}
}
Al final, puede concatenar la cuña del cargador y los módulos compilados juntos, y ejecutar un uglify en eso.
El código repetitivo de Babel está duplicado en cada módulo
Por defecto, la mayoría de los métodos anteriores compilan cada módulo con babel individualmente y luego los concatenan juntos. Eso es lo que hace babelify también. Pero si observa el código compilado, verá que Babel inserta muchas repeticiones al principio de cada archivo, la mayoría de ellas están duplicadas en todos los archivos.
Para evitar esto, puede usar el
babel-plugin-transform-runtime
.
require
no existe en el navegador, por lo que se espera este error.
Debe usar algo como require.js o Browserify.
webpack barebones 2
1) Si este es su directorio raíz:
index.html
<html>
...
<script src="./bundle.js"></script>
...
</html>
scripts.js
import { Circle } from ''./shapes.js'';
...
formas.js
export class Circle {
...
}
2) tener nodo instalado node
3) ejecuta el siguiente comando en tu terminal:
$ npm install -g webpack
5) en su directorio raíz ejecute lo siguiente:
$ webpack scripts.js bundle.js
Ahora debería tener un archivo llamado bundle.js en su directorio raíz, que será el archivo que consumirá su index.html. Esta es una característica de agrupación minimalista de webpack. Puedes aprender más here