嗨，我是Shang，一個從文組轉職的程式開發者，這裡主要是放一些程式相關的筆記。

2020

Webpack Basic

Webpack

安裝webpack

1
$ npm install webpack --save-dev

新增webpack.config.js

在根資料夾下，新增一個檔案webpack.config.js

在config指定entry及output

在webpack.config.js將entry指定為index.js；output指定為bundle.js

webpack.config.js

1
2
3
4
5
6
7
8
9
10
const path = require('path');

module.exports = {
    entry: './src/js/index.js', 
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'bundle.js'
    },
    mode: 'development'
};

./代表現在的資料夾

../代表上一層資料夾

建立指令dev(在package.json)

在 package.json 新增指令 "dev": "webpack"

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "XXXX",
  "version": "1.0.0",
  "description": "XXXX project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development" 
  },
  "author": "SJChen",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.5"
  },
  "dependencies": {}
}

執行指令dev以生成bundle.js

執行指令dev產生bundle.js

1
$ npm run dev

將index.html連結至bundle.js

index.html

1
2
3
<body>
    <script src="js/bundle.js"></script>
</body>

Webpack-cli

安裝webpack-cli

1
$ npm install webpack-cli --save-dev

建立指令build

package.json

1
2
3
4
"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
},

執行指令build

1
$ npm run build

Webpack-dev-server

安裝webpack-dev-server

1
$ npm install webpack-dev-server --save-dev

在config建立devServer

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './dist'
    }
};

建立start指令

package.json

1
2
3
4
5
"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },

執行start以運行devServer

1
$ npm run start

HTML-Webpack-plugin

安裝html-webpack-plugin

1
$ npm install html-webpack-plugin --save-dev

在config建立plugins

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ]
};

執行start以生成index.html

1
$ npm run start

接下來應該是看到src/index.html的內容被輸入至index.html。

註: 若是出錯可參考以下解法: 修改webpack.config.js裡的__dirname為'dist'，並將filename修改為'js/bundle.js'之後，再跑一次npm run start，就成功了。這是因為path要指向到dist裡的index.html，而非dist/js裡(這裡面沒有index.html)。

執行dev以同時生成html及js

1
$ npm run dev

在dist下出現index.html和/js/bundle.js

Babel

安裝Babel相關套件

我們需要安裝三個套件:

  • babel-core
  • babel-preset-env
  • babel-loader
1
$ npm install babel-core babel-preset-env babel-loader --save-dev

在config建立module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
};

新增.babelrc

在根目錄下建立.babelrc

1
2
3
4
5
6
7
8
9
10
11
12
{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [
                    "last 5 versions",
                    "ie >= 8"
                ]
            }
        }]
    ]
}

安裝Babel-polyfill

1
$ npm install babel-polyfill --save-dev

在config指定entry

1
2
3
4
5
6
7
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['babel-polyfill', './src/js/index.js'],
    output: {
        //下略

回顧

資料夾結構

  • dist <–發佈版的資料夾
    • css
      • style.css
    • img
    • js
      • bundle.js <–輸出為ES5的js
    • index.html <–輸出結果
  • node_modules
  • src <–開發版的資料夾
    • js <–採用MVC結構
      • models
      • views
      • config.js <–一些不變的參數,例如API
      • index.js <–匯入models及views的controller
    • index.html
  • .babelrc
  • package-lock.json
  • package.json
  • webpack.config.js

.babelrc

1
2
3
4
5
6
7
8
9
10
11
12
{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [
                    "last 5 versions",
                    "ie >= 8"
                ]
            }
        }]
    ]
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: ['babel-polyfill', './src/js/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
};

閱讀全文
2019

AngularJS與Webpack

引入Webpack整合開發環境

當AngularJS專案日益複雜，各component所使用的lib版本可能不一致(例如d3的v3,v4,v5)，使用webpack可以避免全域變數被汙染，也可以對程式碼進行壓縮。

此外，將首頁中的script檔，由index.js統一管理，也可以避免因載入速度差異導致的undefined錯誤。

除了將js檔陸續移至index.js整合，也同時使用sass-loader，將原本的sass指令整合至webpack.config.js中。

需注意的是，webpack在整合js時，全域變數在瀏覽器中不再能單純的使用 var xxx 或 function xxx 來定義，而須轉變成 window.xxx。

閱讀全文

Sass Basic

安裝node-sass

1
2
3
4
$ npm init

$ npm install node-sass --save-dev  
#--save-dev =>作為dev tool

建立資料夾scss 及 main.scss

創建main.scss

1
2
3
4
$ mkdir sass
$ cd sass/
$ touch main.scss

在package.json編寫compile腳本

開啟package.json, 在”scripts”那欄依序輸入: {"腳本名稱": "node-sass 來源檔 目的檔"}, 這是我們建立的腳本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "mahoshojo",
  "version": "1.0.0",
  "description": "Landing page for mahoshojo",
  "main": "index.js",
  "scripts": {
    "compile:sass": "node-sass app/sass/main.scss app/css/style.css"
      //"腳本名稱": {"指令名稱": "node-sass 來源檔 目的檔"}
  }, 
    
  "author": "QB9487",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.11.0"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

在terminal執行腳本

1
2
3
4
5
6
7
$ npm run compile:sass
# 執行腳本
> mahoshojo@1.0.0 compile:sass D:\Sites\1-Mahoshojo
> node-sass app/sass/main.scss app/css/style.css

Rendering Complete, saving .css file...
Wrote CSS to D:\Sites\1-Mahoshojo\app\css\style.css

開啟 app\css\style.css, 可以看到main.scss的內容, 被轉譯後寫入style.css

1
2
3
4
5
6
7
8
.header {
  height: 95vh;
  background-image: linear-gradient(to right bottom, rgba(255, 153, 221, 0.7), rgba(150, 16, 94, 0.7)), url(../img/pink.jpg);
  /* Photo by Sharon McCutcheon on Unsplash */
  background-size: cover;
  background-position: top;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); }

加入自動監看指令: -w

在腳本設定後加 -w 代表watch

1
2
3
"scripts": {
    "compile:sass": "node-sass app/sass/main.scss app/css/style.css -w"
},

執行腳本時, 附加指令 -w, 每當main.scss存檔時, 腳本就會自動將其轉譯寫入style.css

1
2
3
4
5
6
7
8
9
10
$ npm run compile:sass -w
# 執行腳本 -w

> mahoshojo@1.0.0 compile:sass D:\Sites\1-Mahoshojo
> node-sass app/sass/main.scss app/css/style.css -w

=> changed: D:\Sites\1-Mahoshojo\app\sass\main.scss
Rendering Complete, saving .css file...
Wrote CSS to D:\Sites\1-Mahoshojo\app\css\style.css

註: 基本上這個功能和gulp watch是類似的, 但寫起來比gulp watch方便多了。

在全域安裝 Live server

1
2
3
4
5
6
7
8
9
$ npm install live-server -g
# -g 代表Globally(本機全域)

# 在LINUX/MAC系統可能要使用sudo權限
$ sudo npm install live-server -g

$ live-server -v
live-server 1.2.1
#查看Live-server的版本, 若有顯示則代表安裝成功

執行live-server

1
2
3
4
$ live-server
Serving "D:\Sites\1-Mahoshojo" at http://127.0.0.1:8080
Ready for changes
GET /favicon.ico 404 3.359 ms - 150

同時使用live-server及node-sass

目前我們能夠使用兩個package:

  • node-sass ==> 自動轉譯SCSS檔
  • live-server ==> 自動更新頁面

在有package.json的資料夾中執行node-sass:

1
$ npm run compile:sass -w

在有index.html的資料夾中執行live-server:

1
$ live-server

這兩者記得同時在兩個terminal開啟, 並且不要關掉, 其效果是, 每當我們儲存main.scss, 網頁就會自動更新成修改後的樣貌.

閱讀全文

Sass 與 WordPress

使用SCSS修改樣式

首先是用NPM安裝node-sass，再撰寫腳本指定覆蓋原本的style.css

../package.json

1
2
3
4
"scripts": {
    "scss": "node-sass wordpress/wp-content/themes/sydney/scss/main.scss wordpress/wp-content/themes/sydney/style.css -w",
    
},

將原本的style.css改名為 _styleWP.scss，利用main.scss匯入後，再利用css權重去加入客製化樣式，如此一來就可以在舊有樣式上進行修改。

./scss/main.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@import "abstracts/mixin";
@import "abstracts/variables";
@import "abstracts/utility";

@import "base/base";
@import "base/styleWP";
@import "base/typography";

@import "components/archives";
@import "components/article";
@import "components/button";
@import "components/categories";
@import "components/navbar";
@import "components/search";
@import "components/footer";

@import "layout/home";
閱讀全文