让我们用 laravel-mix 为 TypeScript 和 Sass 创建一个简单的编译环境，可以在没有 Laravel 的情况下使用_typescript文章/教程_其他教程_编程语言

介绍

前端编译TypeScript、Sass、模板引擎等时经常用到Gulp和webpack。
这是我个人的印象，但它们似乎都难以管理，因为它们的描述往往复杂而冗长。
我不想积极进行，因为我要担心加载器的顺序并且有很多配置选项，我必须花时间去了解它们。
我想推荐那里laravel 混合是。

粗略地说，laravel-mix 使得编写 webpack 变得很容易。
它使 webpack 易于使用，因此它自然具有 webpack 打包和编译等功能。
顾名思义，你不使用“Laravel”吗？你可能会这么想，但你可以使用 laravel-mix 而不使用 Laravel！
人们很好，因为他们不了解 Laravel。

在本文中，我们将创建一个环境来使用 laravel-mix 编译 TypeScript 和 Sass。

创造环境

准备

首先，创建一个练习目录并尝试编辑 laravel-mix 文件。
创建一个名为mix-practice 的目录并使用npm init -y 创建package.josn 文件。

命令行

mkdir mix-practice
cd mix-practice
npm init -y

现在你可以安装 laravel-mix 了。
现在安装！

命令行

npm install laravel-mix --save-dev

不要忘记--save-dev，因为你只需要在开发环境中安装它。
安装后，创建一个描述 laravel-mix 的文件。
就像 webpack 文件名是 webpack.config.js
laravel-mix 的文件名是webpack.mix.js。

命令行

touch webpack.mix.js

然后在这个文件的顶部加载之前安装的 laravel-mix。

webpack.mix.js

const mix = require('laravel-mix');

到目前为止的目录结构是这样的。

目录结构

mix-practice
├─ node_modules/
├─ package-lock.json
├─ package.json
└─ webpack.mix.js

laravel-mix 编辑 (TypeScript)

接下来，让我们实际编写 laravel-mix，体验一下与 webpack 的区别。
让我们写信给 webpack.mix.js。
首先是打字稿。

webpack.mix.js

const mix = require('laravel-mix');

mix.setPublicPath('dist');
mix.ts('src/ts/index.ts', 'dist/js');

现在就是这样。时间太长了……
使用.setPublicPath() 指定编译目标（公共目录）。
为.ts() 的第一个参数指定编译源。
如果要捆绑，请将其指定为数组。

例子

mix.ts(['src/ts/index.ts', 'src/ts/sample.ts'], 'dist/js')

第二个参数指定输出目的地。
编译src/ts/index.ts并输出到dist/js。

让我们重写package.json 的scripts 来执行webpack.mix.js。

包.json

"scripts": {
  "build": "mix",
  "watch": "mix watch",
  "production": "mix --production"
},

现在我们已经到了可以暂时编译 TypeScript 的地步了
我还没有安装必要的打字稿或 ts-loader。
手动

命令行

npm install typescript ts-loader --save-dev

但是，如果您将其留给 laravel-mix，它将读取 webpack.mix.js 的内容并解析依赖关系并自动安装它。
所以让我们运行上面的脚本。

命令行

npm run build

运行后输出如下

命令行

Additional dependencies must be installed. This will only take a moment.
Running: npm install ts-loader typescript --save-dev --legacy-peer-deps
Finished. Please run Mix again.

package.json 添加了 ts-loader 和 typescript。
顺便说一句，如果你按照Please run Mix again.的指示再次尝试npm run build，你会得到一个错误，因为没有src/ts/index.ts。

让我们创建tsconfig.json 和index.ts。
首先创建tsconfig.json。

命令行

tsc --init

tsconfig.json 的设置一旦开始就无穷无尽（骗人的，我没有完全掌握它们，因为我没有充分研究它们），所以我只会挑选你设置好的部分。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "lib": ["DOM", "ESNext"],
    "module": "ES2015",
    "sourceMap": true,
    "strict": true,
  }
}

接下来，创建编译源目录src/ts/和文件index.ts。

目录结构

mix-practice
├─ node_modules/
├─ src
│  └─ ts
│     └─ index.ts
├─ package-lock.json
├─ package.json
└─ webpack.mix.js

索引.ts

const greet = (text: string) => {
  console.log(text);
}

greet('hello, world');

现在让我们编译。

命令行

npm run build

如果显示如下则表示成功。

webpack compiled successfully

确保dist/js/index.js 已完成。

目录结构

mix-practice
├─ dist
│  ├─ js
│  │  └─ index.js
│  └─ mix-manifest.json
├─ node_modules/
├─ src
│  └─ ts
│     └─ index.ts
├─ package-lock.json
├─ package.json
└─ webpack.mix.js

laravel-mix 编辑 (Sass)

接下来是萨斯。
这也是一个时刻。

webpack.mix.js

const mix = require('laravel-mix');

mix.setPublicPath('dist');
mix.ts('src/ts/index.ts', 'dist/js');
mix.sass('src/scss/style.scss', 'dist/css/style.css')
  .options({
    processCssUrls: false
  });

options({processCssUrls: false}) 是与url() 相关的设置，例如css中使用的background-image: url()。

scss 从不同的位置编译并输出到不同的位置。
所以用下面的目录结构

例子

root
├─ dist
│  └─ css
│     └─ style.css
└─ src
   ├─ img
   │  └─ sample.png
   └─ scss
      └─ style.scss

在 scss 目录的相对路径描述中

样式.scss

background-image: url('../img/sample.png');

如果你这样做，编译后

样式.css

background-image: url('../images/sample.png?3a0834378861f9a4523f166fed2c0be9');

我不能很好地阅读图像，因为它是这样重写的。
因此，如果使用processCssUrls: false，则url()的内容会被编译成scss中写的那样。
因此，让我们将图像复制到dist/img。

手动复制很麻烦，所以让 laravel-mix 也这样做。

webpack.mix.js

const mix = require('laravel-mix');

mix.setPublicPath('dist');
mix.ts('src/ts/index.ts', 'dist/js');
mix.sass('src/scss/style.scss', 'dist/css/style.css')
  .options({
    processCssUrls: false
  });
mix.copy('src/img', 'dist/img');

这会将 img 目录复制到 dist。
之后，适当准备scss文件和图像文件。

样式.scss

h1 {
  color: red;
  &.color-blue {
    color: blue;
  }
}
div {
  width: 100%;
  height: 250px;
  background-image: url('../img/sample.png');
}

目录结构

mix-practice
├─ dist
│  ├─ js
│  │  └─ index.js
│  └─ mix-manifest.json
├─ node_modules/
├─ src
│  ├─ img
│  │  └─ sample.png
│　├─ scss
│  │  └─ style.scss
│　└─ ts
│  　 └─ index.ts
├─ package-lock.json
├─ package.json
└─ webpack.mix.js

现在让我们构建。

命令行

npm run build

最初，将安装 sass 和 sass-loader（如果尚未安装），就像 TypeScript 一样。
一旦你有了所需的包，你就可以构建了。
如果编译成功，目录结构将如下所示：

目录结构

mix-practice
├─ dist
│  ├─ css
│  │  └─ style.css
│  ├─ img
│  │  └─ sample.png
│  ├─ js
│  │  └─ index.js
│  └─ mix-manifest.json
├─ node_modules/
├─ src
│  ├─ img
│  │  └─ sample.png
│　├─ scss
│  │  └─ style.scss
│　└─ ts
│  　 └─ index.ts
├─ package-lock.json
├─ package.json
└─ webpack.mix.js

将index.html直接放在dist下进行确认。
由于只是为了确认，我只写最低限度的。

索引.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>
<body>
  <h1>赤です</h1>
  <h1 class="color-blue">青です</h1>
  <div></div>
  <script src="js/index.js"></script>
</body>
</html>

在浏览器中查看，如果以下都OK，就大功告成了！谢谢你的辛劳工作！

“它是红色的”是红色的
“它是蓝色的”是蓝色的
显示图像
开发者工具控制台中显示“hello, world”

关于 mix-manifest.json

在我知道之前，已经输出了一个名为mix-manifest.json 的文件。
这是一个缓存避免文件，即使您更改文件也可以防止缓存被反映。
在使用 Laravel 时，似乎调用脚本文件时的mix() 函数会生成查询参数并避免缓存。
在像这次这样不使用 Laravel 的环境下没有多大意义（除非你创建了一个程序，将查询参数添加到 mix-manifest.json 中的文件中），所以最好不要输出它或使用 gitignore 等。我猜。
顺便说一句，我有以下设置来防止输出。

webpack.mix.json

const fs = require('fs');
mix.then(() => {
    fs.unlinkSync('dist/mix-manifest.json')
  });

最后

有没有觉得 laravel-mix 好写？
这次我在webpack.mix.js单独写了描述，不过你可以一次写成方法链。

webpack.mix.js

const mix = require('laravel-mix');
const fs = require('fs');

mix.setPublicPath('dist')
  .ts('src/ts/index.ts', 'dist/js')
  .sass('src/scss/style.scss', 'dist/css/style.css')
  .options({
    processCssUrls: false
  })
  .copy('src/img', 'dist/img');

mix.then(() => {
    fs.unlinkSync('dist/mix-manifest.json')
  });

除了Vue、React等前端框架和库，laravel-mix还可以增加EJS、Nunjucks等模板引擎、监控文件变化和浏览器热重载的功能（BrowserSync）、sourceMap等各种东西.
从 webpack 和 gulp 的麻烦中解脱出来。

参考

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308624516.html