้กฏ็คบๅ…ทๆœ‰ webpack ๆจ™็ฑค็š„ๆ–‡็ซ 。 ้กฏ็คบๆ‰€ๆœ‰ๆ–‡็ซ 
้กฏ็คบๅ…ทๆœ‰ webpack ๆจ™็ฑค็š„ๆ–‡็ซ 。 ้กฏ็คบๆ‰€ๆœ‰ๆ–‡็ซ 

2021/02/01

Work With Typescript And Webpack And Route

ๅ‘ˆไธŠๅ€‹ๆ–‡็ซ ，ๅฆ‚ๆžœๆˆ‘ๅ€‘ๆƒณๆœ‰้กžไผผ SPA ้‚ฃ็จฎ routes ็š„ๅŠŸ่ƒฝ，่ฎ“้‡่ค‡่ณ‡ๆบๅฆ‚ jQuery ็ตฑไธ€ไธ€ๅŒ…่ฉฒๆ€Ž้บผๅฏฆๅš。

็›ฎ้Œ„็ตๆง‹

|   a.html
|   b.html
|   tsconfig.json
|   webpack.config.js
+---app
|
\---src
    |   main.ts
    |   routes.ts
    \---class
            a.ts
            b.ts
            main.interface.ts

ๆˆ‘ๆŠŠ index.ts ๆ”นๆˆไบ† main.ts，ๅขžๅŠ ไบ†，็จ‹ๅผ็ขผๅ…งๅฎนๅฆ‚ไธ‹：

a.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Typescript + Webpack</title>
    <script src="app/main.js"></script>
</head>
<body id="a">
    <div id="content"></div>
</body>
</html>
b.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Typescript + Webpack</title>
    <script src="app/main.js"></script>
</head>
<body id="b">
    <div id="content"></div>
</body>
</html>
main.ts
import $ from 'jquery';
import { routes } from './routes';

$(function () {
    const classLoader = async (routeName: string): Promise<any> => {
        const imported = await import('./class/' + routeName);
        const className = routeName.toUpperCase();

        return new imported[className]();
    }

    routes.forEach(route => {
        if ($(`body#${route}`).is('*')) {
            classLoader(route).then(target => target.init());

            return false;
        }
    });
});
routes.ts
export const routes: string[] = [
    'a',
    'b'
]
webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: {import: './src/main.ts'}
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        path: path.resolve(__dirname, 'app'),
    },
};
main.interface.ts
export interface mainInterface {
    init(): void
}
a.ts
import { mainInterface } from './main.interface';
import $ from 'jquery';

export class A implements mainInterface {
    init(): void {
        $('div#content').html('a');
    }
}
b.ts
import { mainInterface } from './main.interface';
import $ from 'jquery';

export class B implements mainInterface {
    init(): void {
        $('div#content').html('b');
    }
}

N.html ๅฐๆ‡‰ N.ts，ๅฐ‡ๆ‰€ๆœ‰่ฆๅฐๆ‡‰็š„ class ่จญๅฎšๅŠ ๅˆฐ routes.ts，main.ts ๆœƒๅ‹•ๆ…‹ๅตๆธฌๅˆฐ html ๆช”ๆกˆ็š„ body ๆœ‰ๆฒ’ๆœ‰็›ธๅฐๆ‡‰็š„ id，ๆœ‰็š„่ฉฑๅฐฑๅŽปๆ’ˆ็›ธๅฐๆ‡‰็š„ class，่€Œ็›ธๅฐๆ‡‰็š„ class ็นผๆ‰ฟ interface ไธ€ๅฎš่ฆๆœ‰ init() ้€™ๅ€‹ method，ๆœ€็‚บ้€™ๅ€‹้ ้ขๆ™‚่ฆๅš็š„้ ่จญไบ‹ไปถ，้€™ๆจฃ compile ็š„็ตๆžœ jQuery ๆˆ–ๅ…ถไป–็š„ๅฅ—ไปถๅชๆœƒๆœ‰ไธ€ไปฝ，ไธฆไธ”ๅšๅˆฐ้š”้›ขไธๅŒ้ ้ขๆ‰€้œ€่ฆ็š„ๅŠŸ่ƒฝ。

ๅผต่ฒผ่€…： ๆ–ผ ๆฒ’ๆœ‰็•™่จ€:
ๆจ™็ฑค： , ,

2021/01/29

Work With Typescript And Webpack

ๅ› ็‚บๅทฅไฝœ็š„้—œไฟ‚ๆŽฅ่งธไบ† angular，ๆ‰€ไปฅๅญธ็ฟ’ไบ† typescript，่ฆบๅพ—้€™ๅทฅๅ…ทๅพˆๅฅฝ็”จ，ๆ–ผๆ˜ฏๅธŒๆœ›ๅœจ้ž angular ็š„็’ฐๅขƒไธ‹ๅฏซ js ๆ™‚ไนŸ็”จ typescript，้€™ๆ™‚่ฆๅ€Ÿ็”จ webpack ๅนซๅฟ™ๆ‰“ๅŒ…ๆˆ browser ๅฏไปฅไฝฟ็”จ็š„ๅ…งๅฎน。

็›ฎ้Œ„็ตๆง‹

├─app
└─src
    │  index.ts
    │
    └─class
            chan.ts
│  index.html
│  tsconfig.json
│  webpack.config.js

config

tsconfig.json
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true
  }
}

typescript ็š„ๅŸบ็คŽ้…็ฝฎ

webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: {import: './src/index.ts'}
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        path: path.resolve(__dirname, 'app'),
    },
};

webpack ็š„้…็ฝฎ，ๆœƒๆŽƒๆ entry ๆˆ‘ๆŒ‡ๅฎš็š„ๆช”ๆกˆ่ผธๅ‡บๅˆฐ app ๅŒๆจฃ็š„ๆช”ๅ，็”จ้ž spa ็š„ๆ–นๅผ้–‹็™ผๅพ€ๅพ€้‚„ๆ˜ฏไธๅŒ้ ้ขไฝฟ็”จไธๅŒ็š„ js，ๆ‰€ไปฅ้€™ๅ€‹ๆžถๆง‹ๅฐ user ไธฆไธ่ƒฝ็ฏ€็œ่ณ‡ๆบ，ๅ› ็‚บๆฏๅ€‹ js ้ƒฝๆœƒๅŒ…ไธ€ไปฝ jquery，ๅชๆ˜ฏๅฐ้–‹็™ผ่€…ๆ–นไพฟ็š„ๅทฅๅ…ท่€Œๅทฒ，้™ค้žไฝ ๆœ‰ๆŠŠๆกๆŠŠ็จ‹ๅผๅฏซๅˆฐๆฏๅ€‹้ ้ข้š”้›ขไธไบ’็›ธๅนฒๆ“พ，้‚ฃๅฐฑๅฏไปฅไธ€ๆ”ฏๆช”ๆกˆๆ‰“ๅคฉไธ‹，ไนŸๆ˜ฏ spa ็š„้‹ไฝœๆ–นๅผ。

npm i --save webpack webpack-cli typescript ts-loader

ๅฎ‰่ฃ compiler ้œ€่ฆ็š„ๅทฅๅ…ท

ไฝฟ็”จๆ–นๅผ

npm i -s jquery dayjs
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Typescript + Webpack</title>
    <script src="app/index.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>
index.ts
import $ from 'jquery';
import { Chan } from './class/chan';

$(function () {
    const chan = new Chan();

    $('div#content').html(chan.getNow());
});
chan.ts
import dayjs from 'dayjs';

export class Chan {
    public getNow(): string {
        return dayjs().toString();
    }
}

ไฝฟ็”จ webpack compiler ไน‹ๅพŒๆˆ‘ๅ€‘้ ้ขไธŠ็š„ div#content ๆœƒๅ‡บ็พ Fri, 29 Jan 2021 09:09:52 GMT，ๅคงๅŠŸๅ‘Šๆˆ。

ๅผต่ฒผ่€…： ๆ–ผ ๆฒ’ๆœ‰็•™่จ€:
ๆจ™็ฑค： , ,

2016/12/20

Webpack With Vendor

ๅ‰่จ€

ไน‹ๅ‰ๅฏซ้Ž้€™็ฏ‡ webpack，ๅ–ฎไธ€่จญๅฎš webpack ็š„ๆ–นๅผ，ไธ€่ˆฌไพ†่ชช็‚บไบ†ๆธ›ๅฐ‘ request，ๆ‰€ไปฅๆœƒๅธŒๆœ›ๅฐ‡ js ๆช”ๆกˆ compile ๆˆไธ€ๅ€‹，้€™็จฎๆขไปถไฝ ไธๆ˜ฏๅพž้ ญๅˆฐๅฐพๆ‰“้€ ้€™ๅ€‹็ถฒ็ซ™็š„ไฝœ่€…，ไบ†่งฃๆฏๅ€‹้ ้ข dom ๅธƒๅฑ€็š„่ฉฑๆ˜ฏ็›ธ็•ถๅ›ฐ้›ฃ็š„，่€Œไธ”ๅพž HTTP/2 ็š„ๆ–ฐๆจ™ๆบ–ๅ‡บ็พไปฅๅพŒ，้€™ๆ‹›ๅทฒ็ถ“ๆฒ’ๆœ‰ๆ˜Ž้กฏ็š„ๅ„ชๅ‹ขไบ†，ๅฏไปฅๅƒ่€ƒ 「ไฝ ็š„็ถฒ็ซ™ๅ‡็ดšๅˆฐ HTTP/2 ไบ†ๅ—Ž？」้€™็ฏ‡ๆ–‡็ซ 。

ๆ‰€ไปฅ้€™็ฏ‡ๆ–‡็ซ ๆœƒ้‡ๆ–ฐๆ•™ๅญธๆ€Ž้บผ่จญๅฎš，่ฎ“ไฝ ๆฏๅ€‹็ถฒ้ ๆœ‰ๅฑฌๆ–ผ่‡ชๅทฑ็š„ js ๆช”ๆกˆ，ไฝ†ๅ…ฑ็”จ็š„ๅฅ—ไปถๅฆ‚ jQuery ๆˆ– bootstrap ๅปๅฏไปฅ็จ็ซ‹，ๆธ›ๅฐ‘็จ็ซ‹ๆช”ๆกˆ็š„ๅคงๅฐ。

ๅฎ‰่ฃ็›ธ้—œๅฅ—ไปถ

npm i --save-dev webpack babel-core babel-loader babel-preset-es2015
npm i --save jquery bootstrap

็›ฎๅ‰ไธป่ฆ้‚„ๆ˜ฏ็”จ babel ็ทจ่ญฏ่ผƒๆ–ฐ็ฉŽ็š„ JavaScript ่ชžๆณ•。

ๆช”ๆกˆๅธƒๅฑ€

webpack.config.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        a: path.resolve(__dirname, 'js/src/a'),
        b: path.resolve(__dirname, 'js/src/b'),
        vendor: ['jquery', 'bootstrap']
    },
    output: {
        path: path.resolve(__dirname, 'js/build/'),
        filename: '[name].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
        ]
    }
};

้€™ๅ€‹่จญๅฎšๆช”้ ่จˆ่ฆๅฐ‡ js/src/ ไธ‹็š„ a.js ไปฅๅŠ b.js compile ๅˆฐ js/build/，ไธฆๅฐ‡ jQuery ไปฅๅŠ bootstrap ๆŠฝๅ‡บไพ†ๆˆ็‚บ vendor，่จญๅฎšๅฎŒๆˆๅพŒ，ๅœจๆ น็›ฎ้Œ„ๅŸท่กŒ webpack，็ทจ่ญฏๅพŒๅœจ js/build/ ไธ‹ๆœƒ็œ‹ๅˆฐ a.js, b.js, vendor.bundle.js ไธ‰ๅ€‹ๆช”ๆกˆ。

.babelrc
{
  "presets": ["es2015"]
}

้€™ๆ˜ฏ babel ็š„่จญๅฎšๆช”。

js/src/a.js
$(function() {
    $('body').append('this is a');
});
js/src/b.js
$(function() {
    $('body').append('this is a');
});
js/src/b.js
$(function() {
    $('body').append('this is b');
});
a.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack page a</title>
    <script src="js/build/vendor.bundle.js"></script>
    <script src="js/build/a.js"></script>
</head>
<body>
    <h3>this is a</h3>
</body>
</html>
b.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack page b</title>
    <script src="js/build/vendor.bundle.js"></script>
    <script src="js/build/b.js"></script>
</head>
<body>
    <h3>this is b</h3>
</body>
</html>

ๅŸท่กŒ a.htmlไปฅๅŠ b.html ๅฐฑๆœƒ็œ‹ๅˆฐๅ„่‡ช็š„ๆ•ˆๆžœไบ†。

ๅผต่ฒผ่€…： ๆ–ผ ๆฒ’ๆœ‰็•™่จ€:
ๆจ™็ฑค： ,
่จ‚้–ฑ： ๆ–‡็ซ  (Atom)