介绍
前端编译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: 250 px ;
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/in dex . 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
查看更多关于让我们用 laravel-mix 为 TypeScript 和 Sass 创建一个简单的编译环境，可的详细内容...