parcel環境配置和san起步

背景

學習一下parcel打包工具，並作筆記整理。方便查看。

安裝node

• https://nodejs.org/zh-cn/ 根據版本自行下載
• 安裝好以後在終端中輸入node -v 檢查是否安裝成功

淘寶NPM鏡像

• 在終端中輸入 npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建parcel環境

• npm install -g parcel-bundler 全局安裝parcel
• 建立一個文件夾並在終端中cd到這個文件夾中
• 執行npm init 建立package.json，記錄項目所須要的依賴
• 建立.gitignore用來忽略文件
• 打開項目中的package.json文件
• 找到scripts對象，在其中添加"dev": "rd/s/q dist & parcel index.htm" //經過npm run
  dev 執行
• parcel index.html命令
• 建立index.sass 文件並在其寫入樣式
• 在終端中輸入npm install node-sass -g 安裝sass模塊
• 建立index.html和index.js文件，將index.js引進index.html，將index.sass引進index.js中
• 執行 npm run dev命令
• 找到scripts對象，在其中添加"build": "rd/s/q build & parcel build index.html -d
  build --public-url ./" //經過npm run dev 執行parcel index.html命令

san的配置

• 建立一個文件夾並在終端中cd到這個文件夾
• npm init //初始化項目根目錄
• npm install san --save //安裝san
• npm install babel-preset-env --save-dev //安裝babel
• 打開項目中的package.json文件，找到scripts對象
• "dev": "parcel index.html" //建立dev命令
• "build": "parcel build index.html -d build --public-url ./"
  //建立build命令
• 建立index.html文件和src目錄，並在src目錄下建立main.js
• 在main.js寫入 import san from 'san' //導入san

san的起步

//定義一個組件，並初始化模版和數據
var MyApp = san.defineComponent({
    template: '<p>Hello {{name}}!</p>',
    initData: function () {
        return {
            name: 'San'
        };
    }
});
//初始化組件對象
var myApp = new MyApp();
//讓組件在body中渲染
myApp.attach(document.body);