Type Script+React+webpackシンプルフレームワーク

7200 ワード

プロジェクトディレクトリの作成

TypeScriptファイルはsrcフォルダに格納、TypeScriptコンパイラでコンパイルし、webpack処理してbundleを生成します.jsファイルはdistディレクトリの下に置かれます.カスタマイズしたコンポーネントはsrc/componentsフォルダの下に配置されます

イニシャルエンジニアリング

npm init

依存パッケージのインストール

まず、webpack npm install -g webpack

がグローバルにインストールされていることを確認する.

取付react関連npm install --save react react-dom @types/react @types/react-dom

追加開発時依存awesome-typescript-loaderとsource-map-loader npm install --save-dev typescript awesome-typescript-loader source-map-loader

Type Scriptプロファイルの追加

プロジェクトルートの下にtsconfigを追加する.json

{
	"compilerOptions": {
		"outDir": "./dist/",
		"sourceMap": true,
		"noImplicitAny": true,
		"module": "commonjs",
		"target": "es5",
		"jsx": "react"
	},
	"include": [
		"./src/**/*"
	]
}

Demoコード作成

src>componentディレクトリの下にgreeterを追加します.tsxファイル

import * as React from 'react';
export interface HelloProps {
	compiler: string;
	framework: string;
}
export class Hello extends React.Component {
	render() {
		return Hello from { this.props.compiler } and { this.props.framework } !;
	}
}

srcディレクトリの下にindexを追加します.tsxファイル

import * as React from 'react';
import * as ReactDom from 'react-dom';

import { Hello } from './components/greeter';

ReactDom.render(
  "typescript" framework="react" />,
  document.getElementById('demo')
)

ページの表示コンポーネントを追加し、ルートディレクトリの下にindexを追加します.htmlファイル


<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello React!title>
head>

<body>
  <div id="demo">div>

  
  <script src="./node_modules/react/umd/react.development.js">script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js">script>

  
  <script src="./dist/bundle.js">script>
body>

html>

Webpack構成

プロジェクトルートディレクトリの下にwebpackを作成します.config.js

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
  },

  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },

  // When importing a module whose path matches one of the following, just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies, which allows browsers to cache those libraries between builds.
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  },
};

ビルドコマンドの追加

package.jsonに以下の内容を追加する

...
"scripts": {
    "build": "webpack"
  },
...

以下のコマンドを実行する構築npm run build

を行う.

ブラウザがindexを開く.html表示効果

ソースアドレス
転載先:https://juejin.im/post/5c6630c86fb9a049c232f3aa

[SWEA]#1215次ゲート1

Universal link に潜む罠っぽい iOS9 の仕様