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

Tonny 發(fā)布于2019-08-21 17:32 / 3085人閱讀

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

更多配置請(qǐng)查閱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被自動(dòng)轉(zhuǎn)化成了js

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

0x005 資源

源代碼