webpack
Uso de Webpack
Buscar..
Ejemplo de uso de módulos de CommonJS
Crear carpeta. Ábrelo en la línea de comandos. Ejecute npm install webpack -g . Crea 2 archivos:
cats.js:
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
Ejecutar en la línea de comandos: webpack ./app.js app.bundle.js
Ahora en la carpeta será el archivo app.bundle.js . Puede incluirlo en la página index.html, abrirlo en el navegador y ver el resultado en la consola.
Pero la forma más rápida se ejecuta en la línea de comandos: node app.bundle.js y vea el resultado inmediatamente en la consola:
['dave', 'henry', 'martha']
Ejemplo de uso de módulos AMD
Crear carpeta. Ábrelo en la línea de comandos. Ejecute npm install webpack -g . Crea 2 archivos:
cats.js:
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
Ejecutar en línea de comandos:
webpack ./app.js app.bundle.js
Ahora en la carpeta será archivo: app.bundle.js .
Crear archivo index.html:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Ábralo en el navegador y vea el resultado en la consola:
['dave', 'henry', 'martha']
Ejemplo de uso de módulos ES6 (Babel)
como está escrito en MDN en julio de 2016:
Esta característica no está implementada en ningún navegador de forma nativa en este momento. Se implementa en muchos transpilers, como Traceur Compiler, Babel o Rollup.
Así que aquí está el ejemplo con el cargador de Babel para Webpack:
Crear carpeta. Agregue el archivo package.json allí:
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
Abra la carpeta en la línea de comandos. Correr:
npm install.
Crea 2 archivos:
cats.js :
export var cats = ['dave', 'henry', 'martha'];
app.js :
import {cats} from "./cats.js";
console.log(cats);
Para el uso correcto del babel-loader se debe agregar el archivo webpack.config.js :
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
Ejecutar en línea de comandos:
webpack ./app.js app.bundle.js
Ahora en la carpeta será archivo: app.bundle.js .
Crear archivo index.html :
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Ábralo en el navegador y vea el resultado en la consola:
['dave', 'henry', 'martha']
Ejemplo de uso de módulos ES6 (Typescript)
como está escrito en [MDN] [1] en julio de 2016:
Esta característica no está implementada en ningún navegador de forma nativa en este momento. Se implementa en muchos transpilers, como Traceur Compiler, Babel o Rollup.
Así que aquí está el ejemplo con el cargador Typescript para Webpack:
//QUE HACER
Cree una versión simplificada de este artículo: http://www.jbrantly.com/typescript-and-webpack/ sin tsd y jquery.