Laravel-Mix 是 Laravel 对 JS 支持的一种封装,使用 nodejs 来实现,一般 JS 程序,包括Babel、Webpack、Vue 和 React 等等,文档在:
https://laravel.com/docs/5.4/mix
Laravel-Mix 的依赖文件(from package.json):
"dependencies": {
"autoprefixer": "^6.7.3",
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-preset-env": "^1.3.0",
"browser-sync": "^2.18.7",
"browser-sync-webpack-plugin": "^1.1.4",
"chokidar": "^1.6.1",
"clean-css": "^4.0.7",
"concatenate": "0.0.2",
"cross-env": "^3.1.3",
"css-loader": "^0.14.5",
"dotenv": "^4.0.0",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"file-loader": "^0.10.1",
"friendly-errors-webpack-plugin": "^1.5.0",
"fs-extra": "^2.1.2",
"html-loader": "^0.4.4",
"img-loader": "^2.0.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"lodash": "^4.17.4",
"md5": "^2.2.1",
"mkdirp": "^0.5.1",
"node-sass": "^4.0.0",
"on-build-webpack": "^0.1.0",
"path": "^0.12.7",
"postcss-load-config": "^1.0.0",
"postcss-loader": "^1.2.1",
"resolve-url-loader": "^2.0.0",
"sass-loader": "^6.0.0",
"style-loader": "^0.13.1",
"uglify-js": "^2.7.5",
"vue-loader": "^11.1.3",
"vue-template-compiler": "^2.0.0",
"webpack": "~2.3.0",
"webpack-chunk-hash": "^0.4.0",
"webpack-dev-server": "^2.4.0",
"webpack-merge": "^4.0.0",
"webpack-notifier": "^1.4.1",
"webpack-stats-plugin": "^0.1.4"
},
可惜的是,Laravel-Mix 的最新版本还不支持 JS 的 object spread 操作符「...」,但是 Vue 和 React 已经在文档中大量使用了,是一种目前在 stage-3 的 JS 新语法特性,所以可以自己添加支持:
// package.json
"dependencies": {
"babel-plugin-transform-object-rest-spread": "^6.23.0"
},
"babel": {
"plugins": ["transform-object-rest-spread"]
}
然后就可以在 Vue 中使用类似这样的代码:
import { mapState } from 'vuex'
computed: {
...mapState(['courses'])
},
Laravel-Mix 主要是 nodejs 的实现,学习源码是蛮不错的学习 nodejs 的切入点~