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