Este laboratorio se basa en el Webinar de Kurt Weiberth llamado React + Redux + WebPack
https://www.youtube.com/watch?v=CAZZN1gOjoI&index=3&list=PLQDnxXqV213JJFtDaG0aE9vqvp6Wm7nBg
Para esto partimos de una instalacion limpia a la cual le iremos instalando los paquetes necesarios según se vayan requiriendo, con la excepción de que ya tenemos instaldo node.js v6.11.4.
consideremos agregar las siguientes rutas al PATH, esto será necesario según la versión de node.js
%appdata%\npm
%ProgramFiles%\nodejs- Clonamos el Repo de git ya que este contiene una estructura particular de directorios sobre la que se desarrollara el proyecto.
Solo para mostrar la estructura de directorios y archivos iniciales, abriremos el subdirectorio donde este el proyecto con Netbeans y crearemos un nuevo proyecto Node.js Application with existing Sources. no utilizaremos Netbeans para correr el laboratorio.
- Instalamos sublime, ya que utilizaremos ese editor.
Le intalamos el plugin esLint
Sublime menu ->preference->package control->install package->esLint
- Instalamos React y React-dom
C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install --save react react-dom
react-todo-list@1.0.0 C:\Users\Bext\Desktop\react-todo-list_kweiberth
+-- react@0.14.9
| +-- envify@3.4.1
| | +-- jstransform@11.0.3
| | | +-- base62@1.2.1
| | | +-- commoner@0.10.8
| | | | +-- commander@2.12.2
| | | | +-- detective@4.6.0
| | | | | +-- acorn@5.2.1
| | | | | `-- defined@1.0.0
| | | | +-- glob@5.0.15
| | | | | +-- inflight@1.0.6
| | | | | | `-- wrappy@1.0.2
| | | | | +-- inherits@2.0.3
| | | | | +-- minimatch@3.0.4
| | | | | | `-- brace-expansion@1.1.8
| | | | | | +-- balanced-match@1.0.0
| | | | | | `-- concat-map@0.0.1
| | | | | +-- once@1.4.0
| | | | | `-- path-is-absolute@1.0.1
| | | | +-- graceful-fs@4.1.11
| | | | +-- iconv-lite@0.4.19
| | | | +-- mkdirp@0.5.1
| | | | | `-- minimist@0.0.8
| | | | +-- private@0.1.8
| | | | +-- q@1.5.1
| | | | `-- recast@0.11.23
| | | | +-- ast-types@0.9.6
| | | | +-- esprima@3.1.3
| | | | `-- source-map@0.5.7
| | | +-- esprima-fb@15001.1.0-dev-harmony-fb
| | | +-- object-assign@2.1.1
| | | `-- source-map@0.4.4
| | | `-- amdefine@1.0.1
| | `-- through@2.3.8
| `-- fbjs@0.6.1
| +-- core-js@1.2.7
| +-- loose-envify@1.3.1
| | `-- js-tokens@3.0.2
| +-- promise@7.3.1
| | `-- asap@2.0.6
| +-- ua-parser-js@0.7.17
| `-- whatwg-fetch@0.9.0
`-- react-dom@0.14.9
- Instalamos WebPack
C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install -g webpack
C:\Users\Bext\AppData\Roaming\npm\webpack -> C:\Users\Bext\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\Bext\AppData\Roaming\npm\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
C:\Users\Bext\AppData\Roaming\npm
`-- webpack@3.8.1
+-- acorn@5.2.1
+-- acorn-dynamic-import@2.0.2
| `-- acorn@4.0.13
+-- ajv@5.5.0
| +-- co@4.6.0
| +-- fast-deep-equal@1.0.0
| +-- fast-json-stable-stringify@2.0.0
| `-- json-schema-traverse@0.3.1
+-- ajv-keywords@2.1.1
+-- async@2.6.0
| `-- lodash@4.17.4
+-- enhanced-resolve@3.4.1
| +-- graceful-fs@4.1.11
| `-- object-assign@4.1.1
+-- escope@3.6.0
| +-- es6-map@0.1.5
| | +-- d@1.0.0
| | +-- es5-ext@0.10.37
| | +-- es6-iterator@2.0.3
| | +-- es6-set@0.1.5
| | +-- es6-symbol@3.1.1
| | `-- event-emitter@0.3.5
| +-- es6-weak-map@2.0.2
| +-- esrecurse@4.2.0
| `-- estraverse@4.2.0
+-- interpret@1.1.0
+-- json-loader@0.5.7
+-- json5@0.5.1
+-- loader-runner@2.3.0
+-- loader-utils@1.1.0
| +-- big.js@3.2.0
| `-- emojis-list@2.1.0
+-- memory-fs@0.4.1
| +-- errno@0.1.4
| | `-- prr@0.0.0
| `-- readable-stream@2.3.3
| +-- core-util-is@1.0.2
| +-- inherits@2.0.3
| +-- isarray@1.0.0
| +-- process-nextick-args@1.0.7
| +-- safe-buffer@5.1.1
| `-- util-deprecate@1.0.2
+-- mkdirp@0.5.1
| `-- minimist@0.0.8
+-- node-libs-browser@2.1.0
| +-- assert@1.4.1
| +-- browserify-zlib@0.2.0
| | `-- pako@1.0.6
| +-- buffer@4.9.1
| | +-- base64-js@1.2.1
| | `-- ieee754@1.1.8
| +-- console-browserify@1.1.0
| | `-- date-now@0.1.4
| +-- constants-browserify@1.0.0
| +-- crypto-browserify@3.12.0
| | +-- browserify-cipher@1.0.0
| | | +-- browserify-aes@1.1.1
| | | | `-- buffer-xor@1.0.3
| | | +-- browserify-des@1.0.0
| | | | `-- des.js@1.0.0
| | | `-- evp_bytestokey@1.0.3
| | | `-- md5.js@1.3.4
| | | `-- hash-base@3.0.4
| | +-- browserify-sign@4.0.4
| | | +-- bn.js@4.11.8
| | | +-- browserify-rsa@4.0.1
| | | +-- elliptic@6.4.0
| | | | +-- brorand@1.1.0
| | | | +-- hash.js@1.1.3
| | | | +-- hmac-drbg@1.0.1
| | | | +-- minimalistic-assert@1.0.0
| | | | `-- minimalistic-crypto-utils@1.0.1
| | | `-- parse-asn1@5.1.0
| | | `-- asn1.js@4.9.2
| | +-- create-ecdh@4.0.0
| | +-- create-hash@1.1.3
| | | +-- cipher-base@1.0.4
| | | +-- ripemd160@2.0.1
| | | | `-- hash-base@2.0.2
| | | `-- sha.js@2.4.9
| | +-- create-hmac@1.1.6
| | +-- diffie-hellman@5.0.2
| | | `-- miller-rabin@4.0.1
| | +-- pbkdf2@3.0.14
| | +-- public-encrypt@4.0.0
| | +-- randombytes@2.0.5
| | `-- randomfill@1.0.3
| +-- domain-browser@1.1.7
| +-- events@1.1.1
| +-- https-browserify@1.0.0
| +-- os-browserify@0.3.0
| +-- path-browserify@0.0.0
| +-- process@0.11.10
| +-- punycode@1.4.1
| +-- querystring-es3@0.2.1
| +-- stream-browserify@2.0.1
| +-- stream-http@2.7.2
| | +-- builtin-status-codes@3.0.0
| | +-- to-arraybuffer@1.0.1
| | `-- xtend@4.0.1
| +-- string_decoder@1.0.3
| +-- timers-browserify@2.0.4
| | `-- setimmediate@1.0.5
| +-- tty-browserify@0.0.0
| +-- url@0.11.0
| | +-- punycode@1.3.2
| | `-- querystring@0.2.0
| +-- util@0.10.3
| | `-- inherits@2.0.1
| `-- vm-browserify@0.0.4
| `-- indexof@0.0.1
+-- source-map@0.5.7
+-- supports-color@4.5.0
| `-- has-flag@2.0.0
+-- tapable@0.2.8
+-- uglifyjs-webpack-plugin@0.4.6
| `-- uglify-js@2.8.29
| +-- uglify-to-browserify@1.0.2
| `-- yargs@3.10.0
| +-- camelcase@1.2.1
| +-- cliui@2.1.0
| | +-- center-align@0.1.3
| | | +-- align-text@0.1.4
| | | | +-- longest@1.0.1
| | | | `-- repeat-string@1.6.1
| | | `-- lazy-cache@1.0.4
| | +-- right-align@0.1.3
| | `-- wordwrap@0.0.2
| `-- window-size@0.1.0
+-- watchpack@1.4.0
| `-- chokidar@1.7.0
| +-- anymatch@1.3.2
| | +-- micromatch@2.3.11
| | | +-- arr-diff@2.0.0
| | | | `-- arr-flatten@1.1.0
| | | +-- array-unique@0.2.1
| | | +-- braces@1.8.5
| | | | +-- expand-range@1.8.2
| | | | | `-- fill-range@2.2.3
| | | | | +-- is-number@2.1.0
| | | | | +-- isobject@2.1.0
| | | | | `-- randomatic@1.1.7
| | | | | +-- is-number@3.0.0
| | | | | | `-- kind-of@3.2.2
| | | | | `-- kind-of@4.0.0
| | | | +-- preserve@0.2.0
| | | | `-- repeat-element@1.1.2
| | | +-- expand-brackets@0.1.5
| | | | `-- is-posix-bracket@0.1.1
| | | +-- extglob@0.3.2
| | | +-- filename-regex@2.0.1
| | | +-- kind-of@3.2.2
| | | | `-- is-buffer@1.1.6
| | | +-- object.omit@2.0.1
| | | | +-- for-own@0.1.5
| | | | | `-- for-in@1.0.2
| | | | `-- is-extendable@0.1.1
| | | +-- parse-glob@3.0.4
| | | | +-- glob-base@0.3.0
| | | | `-- is-dotfile@1.0.3
| | | `-- regex-cache@0.4.4
| | | `-- is-equal-shallow@0.1.3
| | | `-- is-primitive@2.0.0
| | `-- normalize-path@2.1.1
| | `-- remove-trailing-separator@1.1.0
| +-- async-each@1.0.1
| +-- glob-parent@2.0.0
| +-- is-binary-path@1.0.1
| | `-- binary-extensions@1.11.0
| +-- is-glob@2.0.1
| | `-- is-extglob@1.0.0
| +-- path-is-absolute@1.0.1
| `-- readdirp@2.1.0
| +-- minimatch@3.0.4
| | `-- brace-expansion@1.1.8
| | +-- balanced-match@1.0.0
| | `-- concat-map@0.0.1
| `-- set-immediate-shim@1.0.1
+-- webpack-sources@1.1.0
| +-- source-list-map@2.0.0
| `-- source-map@0.6.1
`-- yargs@8.0.2
+-- camelcase@4.1.0
+-- cliui@3.2.0
| +-- string-width@1.0.2
| | +-- code-point-at@1.1.0
| | `-- is-fullwidth-code-point@1.0.0
| | `-- number-is-nan@1.0.1
| +-- strip-ansi@3.0.1
| | `-- ansi-regex@2.1.1
| `-- wrap-ansi@2.1.0
| `-- string-width@1.0.2
+-- decamelize@1.2.0
+-- get-caller-file@1.0.2
+-- os-locale@2.1.0
| +-- execa@0.7.0
| | +-- cross-spawn@5.1.0
| | | +-- lru-cache@4.1.1
| | | | +-- pseudomap@1.0.2
| | | | `-- yallist@2.1.2
| | | +-- shebang-command@1.2.0
| | | | `-- shebang-regex@1.0.0
| | | `-- which@1.3.0
| | | `-- isexe@2.0.0
| | +-- get-stream@3.0.0
| | +-- is-stream@1.1.0
| | +-- npm-run-path@2.0.2
| | | `-- path-key@2.0.1
| | +-- p-finally@1.0.0
| | +-- signal-exit@3.0.2
| | `-- strip-eof@1.0.0
| +-- lcid@1.0.0
| | `-- invert-kv@1.0.0
| `-- mem@1.1.0
| `-- mimic-fn@1.1.0
+-- read-pkg-up@2.0.0
| +-- find-up@2.1.0
| | `-- locate-path@2.0.0
| | +-- p-locate@2.0.0
| | | `-- p-limit@1.1.0
| | `-- path-exists@3.0.0
| `-- read-pkg@2.0.0
| +-- load-json-file@2.0.0
| | +-- parse-json@2.2.0
| | | `-- error-ex@1.3.1
| | | `-- is-arrayish@0.2.1
| | +-- pify@2.3.0
| | `-- strip-bom@3.0.0
| +-- normalize-package-data@2.4.0
| | +-- hosted-git-info@2.5.0
| | +-- is-builtin-module@1.0.0
| | | `-- builtin-modules@1.1.1
| | +-- semver@5.4.1
| | `-- validate-npm-package-license@3.0.1
| | +-- spdx-correct@1.0.2
| | | `-- spdx-license-ids@1.2.2
| | `-- spdx-expression-parse@1.0.4
| `-- path-type@2.0.0
+-- require-directory@2.1.1
+-- require-main-filename@1.0.1
+-- set-blocking@2.0.0
+-- string-width@2.1.1
| +-- is-fullwidth-code-point@2.0.0
| `-- strip-ansi@4.0.0
| `-- ansi-regex@3.0.0
+-- which-module@2.0.0
+-- y18n@3.2.1
`-- yargs-parser@7.0.0
`-- camelcase@4.1.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
- Instalamos Express
C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install -save express
react-todo-list@1.0.0 C:\Users\Bext\Desktop\react-todo-list_kweiberth
`-- express@4.16.2
+-- accepts@1.3.4
| +-- mime-types@2.1.17
| | `-- mime-db@1.30.0
| `-- negotiator@0.6.1
+-- array-flatten@1.1.1
+-- body-parser@1.18.2
| +-- bytes@3.0.0
| +-- http-errors@1.6.2
| | `-- setprototypeof@1.0.3
| `-- raw-body@2.3.2
+-- content-disposition@0.5.2
+-- content-type@1.0.4
+-- cookie@0.3.1
+-- cookie-signature@1.0.6
+-- debug@2.6.9
| `-- ms@2.0.0
+-- depd@1.1.1
+-- encodeurl@1.0.1
+-- escape-html@1.0.3
+-- etag@1.8.1
+-- finalhandler@1.1.0
| `-- unpipe@1.0.0
+-- fresh@0.5.2
+-- merge-descriptors@1.0.1
+-- methods@1.1.2
+-- on-finished@2.3.0
| `-- ee-first@1.1.1
+-- parseurl@1.3.2
+-- path-to-regexp@0.1.7
+-- proxy-addr@2.0.2
| +-- forwarded@0.1.2
| `-- ipaddr.js@1.5.2
+-- qs@6.5.1
+-- range-parser@1.2.0
+-- safe-buffer@5.1.1
+-- send@0.16.1
| +-- destroy@1.0.4
| `-- mime@1.4.1
+-- serve-static@1.13.1
+-- setprototypeof@1.1.0
+-- statuses@1.3.1
+-- type-is@1.6.15
| `-- media-typer@0.3.0
+-- utils-merge@1.0.1
`-- vary@1.1.2
- Probamos que corra nuestro servidor
C:\Users\Bext\Desktop\react-todo-list_kweiberth>node server/server.js
Express server listening on port 3000
- Instalamos nodemon
C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install -g nodemon
C:\Users\Bext\AppData\Roaming\npm\nodemon -> C:\Users\Bext\AppData\Roaming\npm\node_modules\nodemon\bin\nodemon.js
C:\Users\Bext\AppData\Roaming\npm
`-- nodemon@1.12.1
+-- chokidar@1.7.0
| +-- anymatch@1.3.2
| | +-- micromatch@2.3.11
| | | +-- arr-diff@2.0.0
| | | | `-- arr-flatten@1.1.0
| | | +-- array-unique@0.2.1
| | | +-- braces@1.8.5
| | | | +-- expand-range@1.8.2
| | | | | `-- fill-range@2.2.3
| | | | | +-- is-number@2.1.0
| | | | | +-- isobject@2.1.0
| | | | | +-- randomatic@1.1.7
| | | | | | +-- is-number@3.0.0
| | | | | | | `-- kind-of@3.2.2
| | | | | | `-- kind-of@4.0.0
| | | | | `-- repeat-string@1.6.1
| | | | +-- preserve@0.2.0
| | | | `-- repeat-element@1.1.2
| | | +-- expand-brackets@0.1.5
| | | | `-- is-posix-bracket@0.1.1
| | | +-- extglob@0.3.2
| | | +-- filename-regex@2.0.1
| | | +-- kind-of@3.2.2
| | | | `-- is-buffer@1.1.6
| | | +-- object.omit@2.0.1
| | | | +-- for-own@0.1.5
| | | | | `-- for-in@1.0.2
| | | | `-- is-extendable@0.1.1
| | | +-- parse-glob@3.0.4
| | | | +-- glob-base@0.3.0
| | | | `-- is-dotfile@1.0.3
| | | `-- regex-cache@0.4.4
| | | `-- is-equal-shallow@0.1.3
| | | `-- is-primitive@2.0.0
| | `-- normalize-path@2.1.1
| | `-- remove-trailing-separator@1.1.0
| +-- async-each@1.0.1
| +-- glob-parent@2.0.0
| +-- inherits@2.0.3
| +-- is-binary-path@1.0.1
| | `-- binary-extensions@1.11.0
| +-- is-glob@2.0.1
| | `-- is-extglob@1.0.0
| +-- path-is-absolute@1.0.1
| `-- readdirp@2.1.0
| +-- graceful-fs@4.1.11
| +-- readable-stream@2.3.3
| | +-- core-util-is@1.0.2
| | +-- isarray@1.0.0
| | +-- process-nextick-args@1.0.7
| | +-- safe-buffer@5.1.1
| | +-- string_decoder@1.0.3
| | `-- util-deprecate@1.0.2
| `-- set-immediate-shim@1.0.1
+-- debug@2.6.9
| `-- ms@2.0.0
+-- es6-promise@3.3.1
+-- ignore-by-default@1.0.1
+-- lodash.defaults@3.1.2
| +-- lodash.assign@3.2.0
| | +-- lodash._baseassign@3.2.0
| | | `-- lodash._basecopy@3.0.1
| | +-- lodash._createassigner@3.1.1
| | | +-- lodash._bindcallback@3.0.1
| | | `-- lodash._isiterateecall@3.0.9
| | `-- lodash.keys@3.1.2
| | +-- lodash._getnative@3.9.1
| | +-- lodash.isarguments@3.1.0
| | `-- lodash.isarray@3.0.4
| `-- lodash.restparam@3.6.1
+-- minimatch@3.0.4
| `-- brace-expansion@1.1.8
| +-- balanced-match@1.0.0
| `-- concat-map@0.0.1
+-- ps-tree@1.1.0
| `-- event-stream@3.3.4
| +-- duplexer@0.1.1
| +-- from@0.1.7
| +-- map-stream@0.1.0
| +-- pause-stream@0.0.11
| +-- split@0.3.3
| +-- stream-combiner@0.0.4
| `-- through@2.3.8
+-- touch@3.1.0
| `-- nopt@1.0.10
| `-- abbrev@1.1.1
+-- undefsafe@0.0.3
`-- update-notifier@2.3.0
+-- boxen@1.2.2
| +-- ansi-align@2.0.0
| +-- camelcase@4.1.0
| +-- cli-boxes@1.0.0
| +-- string-width@2.1.1
| | +-- is-fullwidth-code-point@2.0.0
| | `-- strip-ansi@4.0.0
| | `-- ansi-regex@3.0.0
| +-- term-size@1.2.0
| | `-- execa@0.7.0
| | +-- cross-spawn@5.1.0
| | | +-- lru-cache@4.1.1
| | | | +-- pseudomap@1.0.2
| | | | `-- yallist@2.1.2
| | | +-- shebang-command@1.2.0
| | | | `-- shebang-regex@1.0.0
| | | `-- which@1.3.0
| | | `-- isexe@2.0.0
| | +-- get-stream@3.0.0
| | +-- is-stream@1.1.0
| | +-- npm-run-path@2.0.2
| | | `-- path-key@2.0.1
| | +-- p-finally@1.0.0
| | `-- strip-eof@1.0.0
| `-- widest-line@1.0.0
| `-- string-width@1.0.2
| +-- code-point-at@1.1.0
| +-- is-fullwidth-code-point@1.0.0
| | `-- number-is-nan@1.0.1
| `-- strip-ansi@3.0.1
| `-- ansi-regex@2.1.1
+-- chalk@2.3.0
| +-- ansi-styles@3.2.0
| | `-- color-convert@1.9.1
| | `-- color-name@1.1.3
| +-- escape-string-regexp@1.0.5
| `-- supports-color@4.5.0
| `-- has-flag@2.0.0
+-- configstore@3.1.1
| +-- dot-prop@4.2.0
| | `-- is-obj@1.0.1
| +-- make-dir@1.1.0
| | `-- pify@3.0.0
| +-- unique-string@1.0.0
| | `-- crypto-random-string@1.0.0
| `-- write-file-atomic@2.3.0
| +-- imurmurhash@0.1.4
| `-- signal-exit@3.0.2
+-- import-lazy@2.1.0
+-- is-installed-globally@0.1.0
| +-- global-dirs@0.1.1
| | `-- ini@1.3.5
| `-- is-path-inside@1.0.0
| `-- path-is-inside@1.0.2
+-- is-npm@1.0.0
+-- latest-version@3.1.0
| `-- package-json@4.0.1
| +-- got@6.7.1
| | +-- create-error-class@3.0.2
| | | `-- capture-stack-trace@1.0.0
| | +-- duplexer3@0.1.4
| | +-- is-redirect@1.0.0
| | +-- is-retry-allowed@1.1.0
| | +-- lowercase-keys@1.0.0
| | +-- timed-out@4.0.1
| | +-- unzip-response@2.0.1
| | `-- url-parse-lax@1.0.0
| | `-- prepend-http@1.0.4
| +-- registry-auth-token@3.3.1
| | `-- rc@1.2.2
| | +-- deep-extend@0.4.2
| | +-- minimist@1.2.0
| | `-- strip-json-comments@2.0.1
| `-- registry-url@3.1.0
+-- semver-diff@2.1.0
| `-- semver@5.4.1
`-- xdg-basedir@3.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\nodemon\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
- Ahora corremos ya con nodemon con el comando
>npm run serve
Esto por que tenemos en packaje.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "nodemon server/server.js --ignore components"
},
- No da esto de salida y corriendo OK.
> react-todo-list@1.0.0 serve C:\Users\Bext\Desktop\react-todo-list_kweiberth
> nodemon server/server.js --ignore components
[nodemon] 1.12.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server/server.js`
Express server listening on port 3000
- Como Webpack esta instalado glabalmente podemos ejecutarlo como
>webpack --config webpack.config.js
Pero antes necesitamos instalar otros paquetes que se requieren para hacer el bundle, estos son
babel-loader
babel-core
babel-preset-react
babel-preset-es2015
Se siguen las instrucciones del sitio de Babel
Esto para que nos genere un solo archivo llamado bundle.js
C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install --save-dev babel-loader babel-core
react-todo-list@1.0.0 C:\Users\Bext\Desktop\react-todo-list_kweiberth
+-- babel-core@6.26.0
| +-- babel-code-frame@6.26.0
| | +-- chalk@1.1.3
| | | +-- ansi-styles@2.2.1
| | | +-- escape-string-regexp@1.0.5
| | | +-- has-ansi@2.0.0
| | | | `-- ansi-regex@2.1.1
| | | +-- strip-ansi@3.0.1
| | | `-- supports-color@2.0.0
| | `-- esutils@2.0.2
| +-- babel-generator@6.26.0
| | +-- detect-indent@4.0.0
| | | `-- repeating@2.0.1
| | | `-- is-finite@1.0.2
| | | `-- number-is-nan@1.0.1
| | +-- jsesc@1.3.0
| | +-- source-map@0.5.7
| | `-- trim-right@1.0.1
| +-- babel-helpers@6.24.1
| +-- babel-messages@6.23.0
| +-- babel-register@6.26.0
| | +-- core-js@2.5.1
| | +-- home-or-tmp@2.0.0
| | | +-- os-homedir@1.0.2
| | | `-- os-tmpdir@1.0.2
| | `-- source-map-support@0.4.18
| | `-- source-map@0.5.7
| +-- babel-runtime@6.26.0
| | +-- core-js@2.5.1
| | `-- regenerator-runtime@0.11.0
| +-- babel-template@6.26.0
| +-- babel-traverse@6.26.0
| | +-- globals@9.18.0
| | `-- invariant@2.2.2
| +-- babel-types@6.26.0
| | `-- to-fast-properties@1.0.3
| +-- babylon@6.18.0
| +-- convert-source-map@1.5.1
| +-- json5@0.5.1
| +-- lodash@4.17.4
| +-- slash@1.0.0
| `-- source-map@0.5.7
+-- babel-loader@6.4.1
| +-- find-cache-dir@0.1.1
| | +-- commondir@1.0.1
| | `-- pkg-dir@1.0.0
| | `-- find-up@1.1.2
| | +-- path-exists@2.1.0
| | `-- pinkie-promise@2.0.1
| | `-- pinkie@2.0.4
| +-- loader-utils@0.2.17
| | +-- big.js@3.2.0
| | +-- emojis-list@2.1.0
| | `-- object-assign@4.1.1
| `-- object-assign@4.1.1
`-- UNMET DEPENDENCY webpack@^1.12.13
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install --save-dev babel-preset-react
react-todo-list@1.0.0 C:\Users\Bext\Desktop\react-todo-list_kweiberth
+-- babel-preset-react@6.24.1
| +-- babel-plugin-syntax-jsx@6.18.0
| +-- babel-plugin-transform-react-display-name@6.25.0
| +-- babel-plugin-transform-react-jsx@6.24.1
| | `-- babel-helper-builder-react-jsx@6.26.0
| +-- babel-plugin-transform-react-jsx-self@6.22.0
| +-- babel-plugin-transform-react-jsx-source@6.22.0
| `-- babel-preset-flow@6.23.0
| `-- babel-plugin-transform-flow-strip-types@6.22.0
| `-- babel-plugin-syntax-flow@6.18.0
`-- UNMET DEPENDENCY webpack@^1.12.13
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install --save-dev babel-preset-es2015
npm WARN deprecated babel-preset-es2015@6.24.1: � Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
react-todo-list@1.0.0 C:\Users\Bext\Desktop\react-todo-list_kweiberth
+-- babel-preset-es2015@6.24.1
| +-- babel-plugin-check-es2015-constants@6.22.0
| +-- babel-plugin-transform-es2015-arrow-functions@6.22.0
| +-- babel-plugin-transform-es2015-block-scoped-functions@6.22.0
| +-- babel-plugin-transform-es2015-block-scoping@6.26.0
| +-- babel-plugin-transform-es2015-classes@6.24.1
| | +-- babel-helper-define-map@6.26.0
| | +-- babel-helper-function-name@6.24.1
| | +-- babel-helper-optimise-call-expression@6.24.1
| | `-- babel-helper-replace-supers@6.24.1
| +-- babel-plugin-transform-es2015-computed-properties@6.24.1
| +-- babel-plugin-transform-es2015-destructuring@6.23.0
| +-- babel-plugin-transform-es2015-duplicate-keys@6.24.1
| +-- babel-plugin-transform-es2015-for-of@6.23.0
| +-- babel-plugin-transform-es2015-function-name@6.24.1
| +-- babel-plugin-transform-es2015-literals@6.22.0
| +-- babel-plugin-transform-es2015-modules-amd@6.24.1
| +-- babel-plugin-transform-es2015-modules-commonjs@6.26.0
| | `-- babel-plugin-transform-strict-mode@6.24.1
| +-- babel-plugin-transform-es2015-modules-systemjs@6.24.1
| | `-- babel-helper-hoist-variables@6.24.1
| +-- babel-plugin-transform-es2015-modules-umd@6.24.1
| +-- babel-plugin-transform-es2015-object-super@6.24.1
| +-- babel-plugin-transform-es2015-parameters@6.24.1
| | +-- babel-helper-call-delegate@6.24.1
| | `-- babel-helper-get-function-arity@6.24.1
| +-- babel-plugin-transform-es2015-shorthand-properties@6.24.1
| +-- babel-plugin-transform-es2015-spread@6.22.0
| +-- babel-plugin-transform-es2015-sticky-regex@6.24.1
| | `-- babel-helper-regex@6.26.0
| +-- babel-plugin-transform-es2015-template-literals@6.22.0
| +-- babel-plugin-transform-es2015-typeof-symbol@6.23.0
| +-- babel-plugin-transform-es2015-unicode-regex@6.24.1
| | `-- regexpu-core@2.0.0
| | +-- regenerate@1.3.3
| | +-- regjsgen@0.2.0
| | `-- regjsparser@0.1.5
| | `-- jsesc@0.5.0
| `-- babel-plugin-transform-regenerator@6.26.0
| `-- regenerator-transform@0.10.1
`-- UNMET DEPENDENCY webpack@^1.12.13
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
- Ahora si ejecutamos el comando de Webpack para generar bundle.js
C:\Users\Bext\Desktop\react-todo-list_kweiberth>webpack --config webpack.config.js
(node:5872) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: 43a65204cf70d9653829
Version: webpack 3.8.1
Time: 6111ms
Asset Size Chunks Chunk Names
bundle.js 674 kB 0 [emitted] [big] main
[86] multi ./client/client.js 28 bytes {0} [built]
[87] ./client/client.js 666 bytes {0} [built]
+ 159 hidden modules
- Tenemos como resultado en el Browser
No hay comentarios:
Publicar un comentario