當browser遇到node.js的資料要如何處理？－劉老師的跨域創想工坊

由於同學使用那個五行的資料是用node js 所寫成的，而node js是伺服器上使用的，用BROWSER並無法直接使用。

需要靠第三方套件來完成。而有許多不同的方法如使用ECMA 6的import 或使用require.js或是common.js來做。

但我目前試成功的只有browserify一種而己。在此做以下說明：

請參考以下文章

https://hoohoo.top/blog/browserify-tutorial/
https://javascript.ruanyifeng.com/tool/browserify.html

首先各位要先把node.js裝起來，再如以上資料加上browserfiy套件。（註：如果MAC上裝不起來記得用sudo，Windows應該是要用系統管理員權限）

sudo npm install -g browserify

再來，參考https://github.com/tony801015/chinese-lunar

測試一下五行程式是不是有安裝完成

1. 先做一個luck-test.js的程式

lunar = require("@tony801015/chinese-lunar");
console.log(lunar().getJson()); // 抓取目前的年,月,日

2. 然後在執行node luck-test.js會得到以下輸出代表有成功安裝。

[Running] node "/Users/samuelliu/Documents/教學研究及演講/教學/javascript/code-GOTOP/AEL023900_download/myWorkspace/luck-test.js"
{
  year: '2022',
  month: '05',
  day: '24',
  solarTerms: '小滿',
  lunarMonth: '四月',
  lunarDay: '廿四',
  lunarMonthDigit: 4,
  lunarDayDigit: 24,
  isLunarLeapMonth: false,
  leapMonth: 0,
  chineseYear: '壬寅',
  chineseMonth: '乙巳',
  chineseDay: '丁丑',
  chineseTimes: [
    '庚子', '辛丑',
    '壬寅', '癸卯',
    '甲辰', '乙巳',
    '丙午', '丁未',
    '戊申', '己酉',
    '庚戌', '辛亥'
  ],
  week: '2',
  animal: '虎',
  constellation: '雙子座',
  chineseFeb: false,
  nayin: '金',
  chineseTime: '丙午',
  chineseTimesTenGod: '請輸入年齡',
  chineseTimeTenGod: '請輸入年齡',
  chineseYearTenGod: '請輸入年齡',
  chineseMonthTenGod: '請輸入年齡',
  chineseDayTenGod: '請輸入年齡',
  dengGui: '申戌',
  lunarPerMonthHasDays: [
    '30', '29', '30',
    '29', '30', '30',
    '29', '30', '29',
    '30', '29', '30'
  ],
  solarTermDistance: {
    previous: {
      solarTerm: '立夏',
      diffDistanceDay: 19,
      diffDistanceDetail: 18.14877314814815
    },
    next: {
      solarTerm: '芒種',
      diffDistanceDay: 13,
      diffDistanceDetail: 13.017789351851851
    }
  },
  purpleWhites: [
    '二黑', '一白',
    '九紫', '八白',
    '七赤', '六白',
    '五黃', '四綠',
    '三碧', '二黑',
    '一白', '九紫'
  ],
  taiYuan: '丙申',
  mingGong: '丙午',
  shenGong: '壬子'
}

[Done] exited with code=0 in 0.053 seconds

再來就要使用browserify來編譯，由於要把jquery放在node.js程式中而不是放在html中，所以在先做以下安裝

npm install backbone jquery

1.再要做一個新的luck.js檔

const lunar = require("@tony801015/chinese-lunar");
//console.log(lunar().getJson()); // 抓取目前的年,月,日
const lun = lunar().getJson();
console.log(lun);
var $ = require('jquery');
$(function(){
    $("#id01").text(lun.animal);
});

再來做個luck1.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>五行測試</title>

</head>
<body>
<p>
<div  id="id01"></div>
</p>
<script src="bundle.js"></script>
</body>
</html>

最重要的是要把原本的luck.js 使用browserify轉譯成可被browser讀取的套件，此處命名為bundle.js