Day 6 - Web開發環境設定黨(一)

.gitignore
bower.json
composer.json
package.json
webpack.config.js

.gitignore

git 忽略檔案，把「.gitignore」檔案，放在工作資料夾的根目錄下，也就是跟「.git」同一個層級的目錄，可自訂內容。
也可以去 https://github.com/github/gitignore/ 找各版本範例。

目前用到：

Composer
Laravel
Node
Sass

bower.json

用來管理或安裝 Web 開發所需要的 Package，像是 CSS 和 JavaScript，也可以依據套件的相依性來安裝。
參照：https://blog.wu-boy.com/2013/01/bower-is-a-package-manager-for-the-web/
http://blog.fens.me/nodejs-bower-intro/
可以改變安裝路徑讓它跟 vendor 放在一起

增加 .bowerrc

寫入路徑 vendor/bower_components

{
    "directory":"vendor/bower_components",
    "analytics": false
}

dependencies 要依賴的套件
resolutions 規定版本號
說明：http://www.tangshuang.net/3277.html

{
  "name": "project53",
  "dependencies": {
    "bootstrap-sass": "~3.3.4",
    "jquery": "~2.1.3"
   },
  "resolutions": {
    "jquery": ">= 1.11.2"
  }
}

參考文獻：
bower解决js的依赖管理

http://blog.fens.me/nodejs-bower-intro/

composer.json

PHP 依賴性管理工具
require : 簡單告訴 Composer 你的專案依賴哪些套件
require-dev : 開發時依賴的套件
autoload : PSR-4 自動載入、產生 classmap、 files 引入。PSR-4 是建議的方式，因為它更易於使用（當你添加類別時，不需要重新產生自動載入器）
autoload-dev : 允許為開發用途定義自動載入規則
scripts : 包含具名事件和事件相應指令碼的配對。事件的指令碼可以被定義為字串（僅適用於單一指令碼）或陣列（單一或多個指令碼）
config : 可以為composer 設置有的沒的，基本不用動它

官方文件： https://getcomposer.ycnets.com/doc/04-schema.md#autoload-dev

{
    "name": "laravel project53",
    "description": "Docker + Laravel Framework.",
    "keywords": [
        "framework",
        "laravel",
        "Docker"
    ],
    "license": "MIT",
    "type": "project",
    "require": {
        "laravel/framework": "5.1.*",
        "laravelcollective/html": "5.1.*"
    },
    "require-dev": {
        "phpunit/phpunit": "~4.0",
        "phpspec/phpspec": "~2.1",
        "barryvdh/laravel-debugbar": "^2.2",
        "mockery/mockery": "^0.9.7"
    },
    "autoload": {
        "classmap": [
            "database"
        ],
        "psr-4": {
            "App\\": "app/"
        }
    },
    "autoload-dev": {
        "classmap": [
            "tests/TestCase.php"
        ]
    },
    "scripts": {
        "post-install-cmd": [
            "php artisan clear-compiled",
            "php artisan optimize"
        ],
        "post-update-cmd": [
            "php artisan clear-compiled",
            "php artisan optimize"
        ],
        "post-create-project-cmd": [
            "php -r \"copy('.env.example', '.env');\"",
            "php artisan key:generate"
        ]
    },
    "config": {
        "preferred-install": "dist"
    }
}

package.json

Npm 跟 Yarn 差不多87分像，yarn快很多就是。
主要是攥寫要安裝的套件跟資訊可參考：http://ithelp.ithome.com.tw/articles/10158140

devDependencies 代表開發環境要用的套件
dependencies 代表正式環境所依賴的

說明：https://www.zfanw.com/blog/difference-between-dependencies-and-devdependencies.html

{
  "private": true,
  "devDependencies": {
  "gulp": "~3.9.0",
  "webpack": "^1.12.9"
},
    "dependencies": {
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18"
  }
}

webpack.config.js

Webpack是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過loader的轉換，任何形式的資源都可以視作模塊，比如CommonJs模塊、 AMD模塊、 ES6模塊、CSS、圖片、 JSON、Coffeescript、 LESS等。

可以透過Npm、Yarn 安裝 (brew 也可以)
遵照CommonJS 慣例用 require exports 做檔案跟模組的溝通

var webpack = require('webpack'); #尋找引用webpack模組

entr：專案入口點有三種方式
參照：http://ithelp.ithome.com.tw/articles/10185460

output：Output是設定bundle完的程式碼要放在哪個路徑、檔名

filename：檔案名稱
path ：路徑

module：Webpack會依module設定來打包

loaders：解析器可以放入很多不同的解析器

test：值為正規化格式, 要轉譯的路徑, 檔名
exclude：排除路徑, 檔案
inclue：插入路徑
loader：轉譯模組
options | query ：帶參數

resolve：文件的擴展名

alias:就是別名的意思，當有路徑很長的時候，可以設定alias，然後在require()時使用。

plugin
參閱：http://ithelp.ithome.com.tw/articles/10185569
https://rhadow.github.io/2015/05/30/webpack-loaders-and-plugins/

    var path = require('path');
    var webpack = require('webpack');


    module.exports = {
        //傳入一個檔案或者路徑字串 (別名：路徑)
        entry: {
            //共用
            'all': './resources/js/page',
            //前台
            'home': './resources/js/home',
            //後台
            'admin': './resources/js/admin',
            //個人資料
            'profile': './resources/js/profile',
            //相依套件
            'vendor': './resources/js/vendor',
            //測試用
            'test': './resources/js/test',
        },
        //輸出位置, laravel 預設讀取public之下目錄
        output: {
            path: path.join(__dirname, 'public/js'),
            filename: '[name].js',
        },
        module: {
            //載入, 解析, 轉譯
            loaders: [
                {
                    //test 值為正規化格式, 要轉譯的路徑, 檔名
                    test: /\.js?$/,
                    //exclude 排除文件
                    exclude: /(node_modules|bower_components)/,
                    //loader+options => babel?presets[]=ec2015
                    loader: 'babel-loader',
                    options: {
                        // 轉成es2015格式，支援舊的 Browser
                        presets: [ 'es2015' ]
                    },
                },
                {
                    test:/\.css$/,
                    // style-loader!css-loader的縮寫 !是串連的意思
                    loader: 'style!css'
                },
                {
                    test: /\.(png|jpg)$/,
                    //可以寫成url?limit=1024
                    loader: 'url-loader',
                    query: {limit: 1024}
                }
            ]
        },
        resolve: {
            alias: {
                'autosize': path.join(__dirname, config.bowerDir + '/autosize/dist/autosize.min.js'),
                'bootstrap': path.join(__dirname, config.bowerDir + '/jasny-bootstrap/dist/js/jasny-bootstrap.min.js')
            }
        },
        plugins: [
            new webpack.ProvidePlugin({
                'autosize': 'autosize',
                'bootstrap': 'bootstrap'
            })
        ]

    };

參考文獻：
官網
http://webpack.github.io/docs/
webpack指南
https://webpack.toobug.net/zh-cn/
【webpack】的基本工作流程
http://webpack.github.io/docs/
參透 webpack
http://andyyou.logdown.com/posts/370326
深入了解 Webpack Plugins https://rhadow.github.io/2015/05/30/webpack-loaders-and-plugins/
【翻译】Webpack——令人困惑的地方
https://github.com/chemdemo/chemdemo.github.io/issues/13
webpack2 入門實戰 3 scss,html,file-loader
http://milkmidi.blogspot.tw/2017/03/webpack2-3-scsshtmlfile-loader.html
2016 學 webpack ..經驗分享
http://ithelp.ithome.com.tw/articles/10185702
React Day10 - Webpack(3) Plugins推推
http://ithelp.ithome.com.tw/articles/10185569
Webpack学习实践系列(一)
http://blog.hugzh.com/2016/05/02/webpack%E5%AD%A6%E4%B9%A0%E5%AE%9E%E8%B7%B5%E7%B3%BB%E5%88%97-%E4%B8%80/
WEBPACK入門教學筆記
http://blog.kkbruce.net/2015/10/webpack.html#.WOkMIVN95Tb

＃搞這設定黨都快瘋掉
＃webpack 要完全瞭解也太難了
＃還有gulp
＃laravel-elixir, vue
＃到底要怎麼配

邊緣人的編程練習牆角

搜尋此網誌