学习笔记《Laravel Mix》

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 的切入点~

你可能感兴趣的:(学习笔记《Laravel Mix》)