'webpack'에 해당되는 글 3건

  1. 2018.09.14 [TypeScript] Typescript + Webpack + React Configuration
  2. 2018.02.08 [Web] MadCap Idea part 1
  3. 2017.10.09 [JavaScript] WebPack

VisualStudio Code 에서 React 개발환경을 설정하는 순서를 나열해 봤습니다.


Typescript

Webpack

React

을 구성했고 추가적으로 

react-hot-loader

Babel

TSLint


를 설정하는 방법을 기술하였습니다.


추후 화면 Capture 를 추가할 예정입니다. (일단은 제가 확인하기 위한 내용으로...)



<source path>\React\>mkdir typescript-react-webpack

<source path>\React\>cd typescript-react-webpack


<source path>\React\typescript-react-webpack>code .

<source path>\React\typescript-react-webpack>mkdir src

<source path>\React\typescript-react-webpack>mkdir build


npm config list


npm set init.author.name "<Your Name>"

npm set init.author.email "yourAccount@woojja.com"

npm set init.author.url "www.woojja.com"

npm set init.license "MIT"



<source path>\React\typescript-react-webpack>npm init -y


Wrote to 

<source path>\React\typescript-react-webpack\package.json:


######################  package.json  ###########################

{

  "name": "typescript-react-webpack",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "JH.Woo <woojja@bachilab.com> (www.bachilab.com)",

  "license": "MIT"

}

###############################################################



Part 1 — Typescript and Webpack


<source path>\React\typescript-react-webpack>npm install --save-dev typescript webpack webpack-cli


<source path>\React\typescript-react-webpack>copy con webpack.config.js


ctlr + z


######################  webpack.config.js  ###########################


var path = require("path");


var config = {

    mode: 'development',

  /*

   * app.ts represents the entry point to your web application. Webpack will

   * recursively go through every "require" statement in app.ts and

   * efficiently build out the application's dependency tree.

   */

  entry: ["./src/app.ts"],


  /*

   * The combination of path and filename tells Webpack what name to give to

   * the final bundled JavaScript file and where to store this file.

   */

  output: {

    path: path.resolve(__dirname, "build"),

    filename: "bundle.js"

  },


  /*

   * resolve lets Webpack now in advance what file extensions you plan on

   * "require"ing into the web application, and allows you to drop them

   * in your code.

   */

  resolve: {

    extensions: ["*", ".ts", ".tsx", ".js"]

  },


  module: {

    /*

     * Each loader needs an associated Regex test that goes through each

     * of the files you've included (or in this case, all files but the

     * ones in the excluded directories) and finds all files that pass

     * the test. Then it will apply the loader to that file. I haven't

     * installed ts-loader yet, but will do that shortly.

     */

    rules: [

      {

        test: /\.tsx?$/,

        exclude: /node_modules/,

        use: ['ts-loader']

      }

    ]

  }

};


module.exports = config;


###################################################################




<source path>\React\typescript-react-webpack>npm  install --save-dev ts-loader



make file : index.html, src/app.ts, and src/some_module.ts


##########################  src/some_module.ts  ########################

const greeting: string = "Hello World!";


export default greeting;

###################################################################


##########################  src/app.ts  ################################

import greeting from "./some_module";


console.log(greeting);

###################################################################


##########################  index.html ################################

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Getting Started with Typescript, ReactJS, and Webpack</title>

  </head>

  <body>

    <script src="build/bundle.js"></script>

  </body>

</html>

###################################################################


<source path>\React\typescript-react-webpack2>copy con tsconfig.json

{

    "compilerOptions": {

      "jsx": "react",

      "module": "commonjs",

      "noImplicitAny": true,

      "outDir": "./build/",

      "preserveConstEnums": true,

      "removeComments": true,

      "target": "ES5"

    },

    "exclude": [

      "node_modules"

    ]

}

ctlr + z


<source path>\React\typescript-react-webpack>npm run build


index.html 실행



console 확인.




Part 2 — ReactJS


<source path>\React\typescript-react-webpack>npm install --save react react-dom


<source path>\React\typescript-react-webpack>npm install --save-dev @types/react @types/react-dom @types/react-router-dom // @types/webpack-env


############################## some_module.ts ==>  Hello.tsx #####################################

// Remember to rename your file to Hello.tsx and

// place it within your src/ directory

import * as React from "react";


interface HelloProps {

  name: string;

}


class Hello extends React.Component<HelloProps, {}> {

  render() {

    return <div>Hello, {this.props.name}</div>;

  }

}


export default Hello;

###################################################################



########################### app.ts ==>  app.tsx  ########################################

import * as React from "react";

import * as ReactDOM from "react-dom";

import Hello from "./Hello";


ReactDOM.render(

  <Hello name="Willson" />,

  document.getElementById("root")

);

###################################################################


##########################  index.html ###############################

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Getting Started with Typescript, ReactJS, and Webpack</title>

  </head>

  <body>

    <!-- this is where our Hello component will get rendered into -->

    <div id="root"></div>


    <script src="build/bundle.js"></script>

  </body>

</html>

###################################################################



########################  webpack.config.js  ############################

var path = require("path");


var config = {

    mode: 'development',

  /*

   * app.ts represents the entry point to your web application. Webpack will

   * recursively go through every "require" statement in app.ts and

   * efficiently build out the application's dependency tree.

   */

  entry: ["./src/app.tsx"],


  /*

   * The combination of path and filename tells Webpack what name to give to

   * the final bundled JavaScript file and where to store this file.

   */

  output: {

    path: path.resolve(__dirname, "build"),

    filename: "bundle.js"

  },


  /*

   * resolve lets Webpack now in advance what file extensions you plan on

   * "require"ing into the web application, and allows you to drop them

   * in your code.

   */

  resolve: {

    extensions: ["*", ".ts", ".tsx", ".js"]

  },


  module: {

    /*

     * Each loader needs an associated Regex test that goes through each

     * of the files you've included (or in this case, all files but the

     * ones in the excluded directories) and finds all files that pass

     * the test. Then it will apply the loader to that file. I haven't

     * installed ts-loader yet, but will do that shortly.

     */

    rules: [

      {

        test: /\.tsx?$/,

        exclude: /node_modules/,

        use: ['ts-loader']

      }

    ]

  }

};


module.exports = config;

####################################################################


<source path>\React\typescript-react-webpack>npm run build



part 3 — Hot Module Replacement in React (react-hot-loader)


npm install --save-dev react-hot-loader


########################  webpack.config.js  #############################

const webpack = require('webpack');


module.exports = {

...,


plugins: [

new webpack.HotModuleReplacementPlugin()

], 

...


}


####################################################################


A huge development boost will give you react-hot-loader (Hot Module Replacement). 

It will shorten your feedback loop during development. 

Basically whenever you change something in your source code, 

the change will apply in your app running in the browser without reloading the entire page.


######################## app.tsx  ##################################

import * as React from "react";

import * as ReactDOM from "react-dom";

import Hello from "./Hello";


ReactDOM.render(

    <Hello name="Willson" />,

    document.getElementById("root")

  );


module.hot.accept();

####################################################################


참고 :

https://medium.com/@francesco.agnoletto/how-to-set-up-typescript-with-babel-and-webpack-6fba1b6e72d5


https://github.com/Kornil/simple-ts-react-app




import * as React from "react";

import * as ReactDOM from "react-dom";

// hot reload for development

import { AppContainer } from "react-hot-loader";


import App from "./App";


import "./style.scss";


const root = document.getElementById("root") as HTMLElement;


const render = (Component: React.SFC) => {

  ReactDOM.render(

    <AppContainer>

      <Component />

    </AppContainer>,

    root,

  );

};


render(App);


if (module.hot) {

  module.hot.accept("./App", () => {

    render(App);

  });

}


module.hot.accept();

####################################################################


Part 4 — Babel



<source path>\React\typescript-react-webpack>npm install --save-dev babel-core babel-loader

<source path>\React\typescript-react-webpack>npm install --save-dev @babel/core source-map-loader

<source path>\React\typescript-react-webpack>npm install --save-dev @babel/preset-typescript @babel/preset-react @babel/preset-env



<source path>\React\typescript-react-webpack>copy con .babelrc

{

  "presets": ["@babel/react", "@babel/typescript", ["@babel/env", { "modules": false }]]

}

ctrl + z



Tokenization is skipped for lines longer than 20k characters for performance reasons.



part 5 — Setting up TSLint


npm install --save-dev tslint tslint-react



########################  tslint.json  ##################################

{

  "extends": ["tslint:recommended", "tslint-react"],

  "rules": {}

}

####################################################################


행복한 고수되십시오. 


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\




Posted by woojja
2018.02.08 00:24

이 글은 sachabarbs 님의 글을 번역? 한 것입니다.


https://sachabarbs.wordpress.com/2017/05/15/madcap-idea-part-1-start-of-the-client-side-portion-of-the-web-site/


번역이 매끄럽지 않습니다. 유념하시어 참고만하시기 바랍니다.


MadCap Idea part 1 : 
Start of the Client side portion of the web site


저는 아주 특별한 사람 Peter O'Hanlon 에게 특별한 감사를 표합니다.
Peter O'Hanlon 은 code Project 의 Legend 이며 다방면에서 멋진 친구입니다.
이 엄청난 article 을 검토해도 되겠냐는 저의 요청에 Peter 는 자신의 사업을 운영하는 가족이 있는 사람이며 자신만의 멋진 아이디어를 가졌음에도 불구하고 즉시 예라고 말해 주었고, 일을 마칠수 있게 해주었습니다.
고맙습니다 Peter. 당신께 경의를 표합니다.



실제로 저는 Very 를 (말장난을 용서하세요.) 만들고 싶었지만  단순한 uber type 의 Uber app 을 만들었습니다.  
그 app 에는 다음과 같은 기능적 요구사항이 있습니다.

  • 클라이언트가 사용할 수 있는 web interface 가 있어야 합니다. Client 는 "driver" 가 될수도 탑승하는 "Pickup client(승객)"이 될 수도 있습니다.
  • "Pickup Client" 가 사용할 수 있는  web interface 가 있어야 합니다. 그래서 "Pickup Client" 가 선택한 "Pickup Client" 의 위치를 지도에 표시합니다.
  • "Pickup Client" 는 Pickup 임무를 요청 할 수 있습니다. 이 경우 "Driver" 가 이 임무에 대한 지역에 있는 입찰자 입니다.
  • "Pickup Client" 의 위치는 "Driver" 의 지도상에 보여져야 합니다.
  • "Driver" 는 "Pickup Client" 의 임무에 입찰하며, 입찰한 "Driver(s)" 의 위치는 "Pickup Client" 에게 보여져야합니다. 
  • 입찰에 참여한 "Driver" 의 수락한 정보는 "Pickup Client" 에게 보내집니다.
  • "Pickup Client" 가 "Driver" 를 수락하면 할당된 "Driver(s)" 의 위치만 "Pickup Client" 현재 지도상에 보여집니다.
  • "Driver" 에 의해 픽업되어 "Pickup Client" 가 행복하면  "Pickup Client" 는 "Driver" 를 1~10 점으로 평가할 수 있으면 "Driver" 또한 "Pickup Clinet" 를 1~10 점으로 평가 할 수 있습니다.
  • "Pickup Client" 가 임무를 "완료"로 표시한 후에만 평가를 할 수 있습니다.
  • "Driver" 나 "Pickup Client" 는 항상 자신의 이전 평가를 볼 수 있어야 합니다.

여러분에게는 아이들 장난처럼 보일수도 있지만 (단순히 CRUD 작업을 사용한다면 나에게도 그렇겠지만), 저는 이 App 이 학습경험을 위한 것이기 때문에  간단한 SignalR Hub 와 두개의 database table 을 사용하지는 않을 것입니다.
저는 이 프로젝트를 평소와는 다른 완전히 다른 기술 Set 을 사용하여 작성하려고 합니다.
사용하는 기술의 일부는 초당 수십만건의 요청에도 견딜 수 있도록 쉽게 확장 할 수 있습니다. (Kafka 가 담당합니다.)

사용할 수 있는 가능한 기술들.

  • WebPack
  • React.js
  • React Router
  • TypeScript
  • Babel.js
  • Akka
  • Scala
  • Play (Scala Http Stack)
  • MySql
  • SBT
  • Kafka
  • Kafka Streams
(React/Webpack) 같은 기술들은 다른 blog 에서 다루어졌겠지만 이중 일부는 새로운/통찰력있는 자료가 될 것으로 생각됩니다.
Webpack 에 대해 들어본적이 없어서 새로울 수 있겠지만 여러분에게 충분한 정보가 되길 기대합니다.

천마디 말보다 더 잘 설명하는 한장의 그림이 있습니다.

Demo


Github


다음에 계속 됩니다.


행복한 고수되십시오. ^^


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\





'Web' 카테고리의 다른 글

[Web] MadCap Idea part 1  (0) 2018.02.08
[Web] HTTP Status Error Code  (0) 2013.03.05
Posted by woojja

 수많은 의존관계에 있는 JS 파일을 웹에 배포하는 것이 그리 쉬운일이 아닐겁니다.


이때 사용하는 것이 WebPack Module Bundler 입니다.


설치는 


npm install -g webpack


사용은 


webpack "WoojjaCustomer.js" "Bundle.js" --output-library='WoojjaLibrary'



webpack 에게 시작 JS 파일을 알려주면 참조관계에 맞추어 Bundle JS 파일을 생성해주며, WoojjaLibrary 라는 이름의 component 를 생성해줍니다.



HTML 에서의 사용은 


<script src="Bundle.js"></script>

<script>

var x = new WoojjaLibrary.Customer();

x.Add();

</script>


접근하는데도 편리하겠죠? 


행복한 고수되셔요~ ^^


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\





'Web > JavaScript' 카테고리의 다른 글

[JavaScript] WebPack  (0) 2017.10.09
[JavaScript] SystemJS  (0) 2017.10.08
[JavaScript] Interval, Timeout  (0) 2017.02.11
[JavaScript] Markup Insertion  (0) 2017.02.10
[JavaScript] Pop Up 차단 확인  (0) 2017.01.26
[JavaScript] Browser 탐지 스크립트  (0) 2017.01.26
Posted by woojja
TAG webpack
이전버튼 1 이전버튼