国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零開始的webpack生活-0x012：TranspilingLoader裝載腳本

Tonny / 3080人閱讀

摘要：概述上一章講的是樣式裝載相關(guān)的，這一章見得是腳本加載相關(guān)的環(huán)境配置栗子加載安裝依賴修改配置添加配置文件使用編寫腳本打包并查看結(jié)果可以看到，語法被自動轉(zhuǎn)化成了更多配置請查閱關(guān)于章節(jié)栗子加載安裝依賴

0x001 概述

上一章講的是樣式裝載相關(guān)的loader，這一章見得是腳本加載相關(guān)的loader

0x002 環(huán)境配置 
$ mkdir 0x012-transliling-loader
$ cd 0x012-transliling-loader
$ npm init -y
$ npm install --save-dev webpack
$ touch ./src/index.js
$ vim webpack.config.js

// ./webpack.config.js
const path = require("path");

module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    }
;
0x003 栗子1-babel-laoder加載es6

安裝依賴

$ cnpm install --save-dev babel-loader babel-core babel-preset-env

修改配置

const path         = require("path");

module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test   : /.js$/,
                exclude: /node_modules/,
                use    : {
                    loader: "babel-loader"
                }
            }
        ]
    }
}
;

添加babel配置文件

$ vim ./.babelrc
// ./.babelrc
{
  "presets": ["es2015"]
}

使用es6編寫腳本

$ vim ./src/index.js
// ./src/index.js
let sayHello = () => {
    console.log("hello webpack")
}
sayHello();

打包并查看結(jié)果

// ./dist/index.bundle.js
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


var sayHello = function sayHello() {
    console.log("hello webpack");
};
sayHello();

/***/ })
/******/ ]);

可以看到，es6語法被自動轉(zhuǎn)化成了es5

更多配置請查閱webpack關(guān)于babel-loader章節(jié)

0x004 栗子2-awesome-typescript-loader 加載typescript

安裝依賴

$ cnpm install --save-dev awesome-typescript-loader

修改配置

const path = require("path");

module.exports = {
    entry  : {
        "index": ["./src/index.ts"],
    },
    output : {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"]
    },
    module : {
        rules: [
            {
                test  : /.tsx?$/,
                loader: "awesome-typescript-loader"
            }
        ]
    }
}
;

添加typescript的配置

$ vim ./tsconfig.json
// ./tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "removeComments": true
  },
  "awesomeTypescriptLoaderOptions": {
    /* ... */
  }
}

編寫index.ts

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

編譯并查看結(jié)果

/* 1 */
/***/ (function(module, exports) {

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
var greeter = new Greeter("world");


/***/ })
/******/ ]);

可以看出，typescript被自動轉(zhuǎn)化成了js

其他更多配置，請查閱awesome-typescript-loader相關(guān)說明

0x005 資源

源代碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89644.html

相關(guān)文章

  • 從零開始的webpack生活-0x001：webpack初次相逢

    摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復(fù)之后會再次打包。 0x001 概述 其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...

    Turbo 評論0 收藏0

  • 從零開始的webpack生活-0x011：StylingLoader裝載樣式

    0x001 概述 上一章講的是裝載模板，這一章講的是裝載樣式 0x002 配置環(huán)境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

    mylxsw 評論0 收藏0

  • 從零開始的webpack生活-0x010：TemplatingLoader裝載模板

    摘要：概述上一章講的時候關(guān)于文件相關(guān)的，這一章講的是模板相關(guān)的。環(huán)境配置栗子加載安裝依賴包編寫并引入配置低于否則使用打包并查看結(jié)果可以看到，被打包成了字符串，并封裝成模塊導(dǎo)出。更多資源，請查閱的倉庫和官網(wǎng)資源源代碼 0x001 概述 上一章講的時候關(guān)于文件相關(guān)的loder，這一章講的是模板相關(guān)的loder。 0x002 環(huán)境配置 $ mkdir 0x010-templating-loader...

    jk_v1 評論0 收藏0

  • 從零開始的webpack生活-0x013：LintingLoader格式校驗

    摘要：概述上一章講的是腳本裝載相關(guān)的，這一章見得是腳本格式校驗相關(guān)的環(huán)境配置使用校驗格式這份配置是偷的安裝依賴包修改配置文件添加配置文件編寫測試代碼張三打包輸出張三 0x001 概述 上一章講的是腳本裝載相關(guān)的loader，這一章見得是腳本格式校驗相關(guān)的loader 0x002 環(huán)境配置 $ mkdir 0x013-linting-loader $ cd 0x013-linting-load...

    ephererid 評論0 收藏0

  • 從零開始的webpack生活-0x009：FilesLoader裝載文件

    摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結(jié)尾的文件，都將使用這個來處理命中后使用的加載器查看結(jié)果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護(hù)和美觀更多配置，可以查閱關(guān)于部分。 0x001 概述 上一章講的是DLL加速編譯，這一章開始講loader相關(guān)的部分，但是關(guān)于plugin的部分善未完結(jié)，因為即將要講的ExtractTextWebp...

    NervosNetwork 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<