TypeScript 샘플 2 시도

4349 단어 Node.jsJavaScriptTypeScriptVSCode

입문


Node.js와 npm를 브라우저에서 사용할 수 있도록 의존 관계를 해결하기 위해 브라우저 최적화 예시를 시도한 비망록을 발표했습니다.

전제 조건


  • Visual Studio Code 설치됨

  • Node.js/npm 설치됨
  • git샘플 다운로드에서 모든 디렉터리로 압축 해제
  • MarketPlace에 ViewIn Browser 설치
  • OS는 Windows7/10
    • 으로 가정합니다.

    예제 browserify


    브라우저에 현재 날짜와 시간을 내보내는 예입니다.

    파일 구성


    경로
    파일 이름
    설명
    .
    .gitignore
    비git 관리 설정 파일
    .
    app.css
    스타일 시트
    .
    bundle.js
    app.js가 브라우저에서 생성한 JavaScript
    .
    index.html
    브라우저 출력용 html
    .
    app.js.map
    app.js에서 만든 맵 파일 컴파일
    .
    package-lock.json
    종속성 고정 JSON
    .
    package.json
    종속성 기술 JSON
    .
    README.md
    이 예제의 설명과 사용 방법
    .
    tsconfig.json
    유형 스크립트 컴파일 프로필
    src
    app.js
    app.ts 컴파일에서 만든 JavaScrip
    src
    app.js.map
    app.ts에서 만든 맵 파일 컴파일하기
    src
    app.ts
    timeReporter를 실행하는 유형 스크립트
    src
    node.d.ts
    os 및 util 모듈을 정의하는 TypeScript
    src
    timeReporter.js
    timeReporter.ts 컴파일에서 만든 JavaScrip
    src
    timeReporter.js.map
    timeReporter.ts에서 만든 맵 파일 컴파일하기
    src
    timeReporter.ts
    브라우저에 날짜와 시간을 출력하는 유형 스크립트

    클래스 및 프로세스 맵




    실행

    cd ./browserify
npm install -g browserify
npm install
npm run tsc
npm run browserify
npm run listen
    index.편집 프로그램에 html 표시 후 Ctrl+F1
    ※1 index.html을 시작하려면 MarketPlace에서 ViewIn Browser 설치
    ※ 2 중지는 Ctrl+c
    ※ 3npm run xxx의 명령은 페이지입니다.json의scripts에서 tsc에서listen까지 정의
    npm run all 실행pakege.json抜粋
    "scripts": {
    "tsc": "node node_modules/typescript/lib/tsc.js",
    "browserify": "browserify src/app.js -o bundle.js -s app",
    "listen": "node node_modules/http-server/bin/http-server",
    "all": "npm run tsc && npm run browserify && npm run listen"
    }

    결과



    득점


    앱에서 js는browserifybundle를 사용합니다.js를 만들고 require를 만듭니다.min.js 실행
    app.js를 실행하는 데 필요한 모듈은 node입니다.js의 모듈 그룹에서 이bundle로 묶으세요.js로 출력합니다.browserify는 모듈 버퍼 라고 합니다.
    index.html 15줄로 인코딩된require에'bundle'를 불러와 의존 관계를 해결한 후 앱.js를 실행하고 있습니다.
    index.발췌하다
    <head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.min.js"></script>
</head>
<body>
    <h1>Browserify/TypeScript sample</h1>
    <div id="content"></div>
    <script>
    require(["bundle"], function(app) {
        var element = document.getElementById("content");
        app.start(function(s) { element.innerText = s; } );
    });
    </script>

    공책


    브라우저의 기본 구조를 기록합니다.
    app.js 의존 관계를 해결하기 위해require.min.js에서 bundle까지.js를 불러옵니다.

    총결산


    브라우저의 기본 구조를 보면 timeReporter입니다.자신의 원본으로 js의 원본을 바꾸면 이 구조를 완전히 표절한 것을 발견할 수 있다.템플릿화된 후에 응용이 많은 것 같습니다.
    이상
    hdu 2824 The Euler function
    underscore.js

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage