Post List

2016년 10월 26일 수요일

Walmart Electrode #01 Create a Reusable Component

새로운 프로젝트를 하기 위해 상위 디렉토리에서 신규 프로젝트 디렉토리를 생성한다.

[binrang@binrang ~]$ mkdir br-electrode-component
[binrang@binrang ~]$ cd br-electrode-component/
[binrang@binrang br-electrode-component]$ 

이번에도 Yeoman 을 이용한다. 먼저 generator-electrode-component 를 글로벌 모드로 설치하자.



[binrang@binrang br-electrode-component]$ sudo npm install -g generator-electrode-component
[sudo] password for binrang: 
npm WARN deprecated cross-spawn-async@2.2.4: cross-spawn no longer requires a build toolchain, use it instead!
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
> spawn-sync@1.0.15 postinstall /usr/lib/node_modules/generator-electrode-component/node_modules/spawn-sync
> node postinstall
/usr/lib
└─┬ generator-electrode-component@1.1.2 
  ├─┬ chalk@1.1.3 
  │ ├── ansi-styles@2.2.1 
  │ ├── escape-string-regexp@1.0.5 
......
  └─┬ yeoman-option-or-prompt@1.0.2 
    └── lodash@3.10.1 
[binrang@binrang br-electrode-component]$ 

이제  새로운 구성을 생성해보자.

[binrang@binrang br-electrode-component]$ yo electrode-component
Welcome to the Electrode Component Generator
We're going to set up a new Electrode component, ready for development with
gulp, webpack, demo, electrode component archetype, and live-reload
? What is your Package/GitHub project name? (e.g., 'wysiwyg-component') br-elec-component
? What is the ClassName for your component? BrElecComponent
? What will be the npm package name? br-elec-component
? What will be the GitHub organization username (e.g., 'walmartlabs')? binrang
? What is your name? (for copyright notice, etc.) binrang
? What is your GitHub Username? binrang
? What is the name of the GitHub repo where this will be published? br-elec-component
? Would you like to create a new directory for your project? Yes
   create .babelrc
   create .gitignore
   create .npmignore
   create .editorconfig
   create gulpfile.js
......
[15:20:11] Finished 'build-lib' after 1.66 s
[15:20:11] Starting 'build-dist-dev'...
Hash: c612fb83f4f8a7e7c843
Version: webpack 1.13.2
Time: 2725ms
        Asset    Size  Chunks             Chunk Names
    bundle.js  351 kB       0  [emitted]  main
bundle.js.map  424 kB       0  [emitted]  main
 [145] ./src/lang/tenants ^\.\/.*\/default\-messages$ 286 bytes {0} [optional] [built]
    + 149 hidden modules
[15:20:15] Finished 'build-dist-dev' after 3.97 s
......
[15:20:21] Finished 'prepublish' after 12 s
br-elec-component@1.0.0 /home/binrang/br-electrode-component/br-elec-component
├── electrode-archetype-react-component@1.1.4 
├─┬ electrode-archetype-react-component-dev@1.1.3 
│ ├─┬ babel-cli@6.18.0 
......
    └─┬ vinyl@0.4.6 
      └── clone@0.2.0 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/stylint/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN br-elec-component@1.0.0 No license field.
Your new Electrode component is ready!
Your component is in src/ and your demo files are in demo/
Type 'cd br-elec-component' then 'gulp demo' to run the development build and demo tasks.
[binrang@binrang br-electrode-component]$ 

이제 디렉토리로 이동하여 구조를 살펴보면 아래와 같다.

[binrang@binrang br-elec-component]$ tree -L 1
.
├── README.md
├── demo
├── dist
├── gulpfile.js
├── lib
├── node_modules
├── package.json
├── src
├── test
└── tmp
7 directories, 3 files
[binrang@binrang br-elec-component]$ 



  • demo/
    • 설치된 component의 라이브 데모 디렉토리이다. 예제 파일들이 포함되어 있다.
  • node_modules/
    • 이 프로그램에서 사용할 수 있는 모듈이 포함되어 있다.
  • src/
    • 소스 코드 디렉토리이다.
  • test/
    • 테스트 주도 개발 방식은 월마트랩의 기본 방향으로 이 디렉토리에서 주로 집중되서 진행된다


이제 gulp demo 를 실행해서 웹 화면을 확인해 보자.

[binrang@binrang br-elec-component]$ gulp demo
[16:24:04] Using gulpfile ~/br-electrode-component/br-elec-component/gulpfile.js
[16:24:04] Starting 'demo'...
[16:24:04] Starting 'generate'...
[16:24:04] Starting 'generate-metadata'...
[16:24:05] Finished 'generate-metadata' after 639 ms
[16:24:05] Starting 'generate-documentation'...
[16:24:05] Finished 'generate-documentation' after 458 ms
[16:24:05] Finished 'generate' after 1.1 s
[16:24:05] Starting 'server-dev'...
 http://localhost:4000/webpack-dev-server/
webpack result is served from /js/
......
  [913] ./~/react-intl/locale-data/zh.js 4.62 kB {0} [optional] [built]
  [914] ./~/react-intl/locale-data/zu.js 1.76 kB {0} [optional] [built]
  [915] ./~/raw-loader!./demo/examples/br-elec-component.example 40 bytes {0} [built]
     + 5 hidden modules
webpack: bundle is now VALID.

Walmart Electrode Component 화면 출력

Good!!!

참조 URL : create_reusable_component.html