TypeScript with Laravel Mix

当我们使用Laravel框架开发网站时，需要编译JavaScript及SASS以实现我们的网页设计。通常情况下，前端JavaScript代码位于下述路径：

/resources/assets/js/app.js

对于规模比较小的项目，我们可以直接在app.js中加入我们的JavaScript代码，无论基于什么前端框架。然而，随着项目规模逐渐增大，代码量越来越多，对代码进行模块化显得愈发重要（当然，这也是一个很好的编码习惯，最好从项目开始，就有这样的意识）。

问题描述

对于部分可复用函数，我想将其单独存放，汇集成一个代码源文件，并import到app.js中来，同时，我亦想用TypeScript语言替换JavaScript语言以获得清晰的类型声明，我要怎么处理？

问题分析

对于这一问题，我们可以分两步走:

• 令程序能够自动加载和编译TypeScript代码；
• 正确导入单独存放的额可复用代码。

TypeScript with Laravel Mix

在Laravel Framework 5.5 中，要使项目正确地加载和编译TypeScript代码，我们首先需要安装ts-loader：

yarn add ts-loader typescript --dev

安装完毕后，我们需要对配置文件作一定的修改，在Shell中运行node_modules/.bin/tsc --init命令，将会在项目文件夹根目录生成配置文件tsconfig.json。对于该配置文件中的默认配置，我们不作修改，需要在最后加上"include": ["resources/assets/js/**/*"]：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false
  },
  "include": ["resources/assets/js/**/*"]
}

接下来，对Laravel Mix进行配置修改，在根目录中编辑webpack.mix.js 文件，修改如下：

const { mix } = require("laravel-mix");

mix
  .js("resources/assets/js/app.js", "public/js")
  .sass("resources/assets/sass/app.scss", "public/css")
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "ts-loader",
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
    }
  });

如此，我们的项目就能够正确地加载和编译TypeScript代码啦！

测试

在resources/assets/js/文件夹下创建utility.ts文件，并写入：

export function helloWorld(): string {
  return "Hello world!";
}

保存后，打开app.js，使用require()函数import刚刚写好的TypeScript代码：

const utility = require('./utility');

console.log(utility.helloWorld());

保存并编译代码，就可以在Console中看到结果啦！

以上！