parcel環(huán)境配置和san起步

psychola 發(fā)布于2019-08-22 16:57 / 1831人閱讀

背景

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

安裝node

https://nodejs.org/zh-cn/ 根據版本自行下載

安裝好之后在終端中輸入node -v 檢查是否安裝成功

淘寶NPM鏡像

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

搭建parcel環(huán)境

npm install -g parcel-bundler 全局安裝parcel

創(chuàng)建一個文件夾并在終端中cd到這個文件夾中

執(zhí)行npm init 創(chuàng)建package.json，記錄項目所需要的依賴

創(chuàng)建.gitignore用來忽略文件

打開項目中的package.json文件

找到scripts對象，在其中添加"dev": "rd/s/q dist & parcel index.htm" //通過npm run
dev 執(zhí)行

parcel index.html命令

創(chuàng)建index.sass 文件并在其寫入樣式

在終端中輸入npm install node-sass -g 安裝sass模塊

創(chuàng)建index.html和index.js文件，將index.js引進index.html，將index.sass引進index.js中

執(zhí)行 npm run dev命令

找到scripts對象，在其中添加"build": "rd/s/q build & parcel build index.html -d
build --public-url ./" //通過npm run dev 執(zhí)行parcel index.html命令

san的配置

創(chuàng)建一個文件夾并在終端中cd到這個文件夾

npm init //初始化項目根目錄

npm install san --save //安裝san

npm install babel-preset-env --save-dev //安裝babel

打開項目中的package.json文件，找到scripts對象

"dev": "parcel index.html" //創(chuàng)建dev命令

"build": "parcel build index.html -d build --public-url ./"
//創(chuàng)建build命令

創(chuàng)建index.html文件和src目錄，并在src目錄下創(chuàng)建main.js

在main.js寫入 import san from "san" //導入san

san的起步

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

GPU云服務器云服務器 san和分布式存儲 iis7和iis8如何配置asp運行環(huán)境起步 Parcelable

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/94715.html

2018前端值得關注的技術

摘要：年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去，2018已經來到。人在進步，技術在發(fā)展。2018年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。下面就我個人的判斷進行一個預測判斷，希望能對大家...

xiao7cn 2019-08-29 14:12 評論0 收藏0
2018前端值得關注的技術

摘要：年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。自從谷歌提出后，就持續(xù)的獲得了業(yè)界的關注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去，2018已經來到。人在進步，技術在發(fā)展。2018年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。下面就我個人的判斷進行一個預測判斷，希望能對大家...

用戶84 2019-08-21 18:42 評論0 收藏0
Parcel - 極速零配置Web應用打包工具

摘要：極速零配置應用打包工具的優(yōu)勢極速打包時間使用進程去啟用多核編譯。的缺點缺乏插件新出的打包工具，還在成長當中，插件的數量和這種成熟的工具是無法相比的。不太適合大項目畢竟配置，無需過多的配置即可使用。 showImg(https://segmentfault.com/img/remote/1460000012593231); 開發(fā)項目或者寫 demo 的時候，還在為 webpack 的配置...

fireflow 2019-08-21 18:24 評論0 收藏0
RAKsmart新增彈性云服務器首推硅谷機房可選優(yōu)化/精品/CN2線路

RAKsmart 商家對于我們很多站長朋友不算陌生，從早期只有美國自營圣何塞機房的獨立服務器產品，再到如今有提供中國香港、日本、美國硅谷、洛杉磯、韓國、新加坡、荷蘭等多個數據中心的大帶寬服務器、站群服務器、高防服務器，以及還有對應機房的便宜VPS主機，可謂說產品線拉的還是很開的。實際上老蔣之前也有介紹到 RAKsmart 商家在7月份的時候開始嘗試新增設的云服務器產品，畢竟傳統(tǒng)的VPS主機...

233jl 2021-08-05 10:00 評論0 收藏0
原創(chuàng)全新打包工具Parcel零配置VueJS開發(fā)腳手架

摘要：一個基于打包工具的急速開發(fā)腳手架解決方案強烈建議使用以上項目地址初始化項目安裝依賴其中是主要的工具，對于結尾的單文件，需要單獨處理文件類型，這個插件會通過來生成對應的代碼，會自動加載開頭的依賴。 parcel-vue 一個基于Parcel打包工具的 VueJS急速開發(fā)腳手架解決方案,強烈建議使用node8.0以上項目地址: https://github.com/w3c-king/p....

testHs 2019-08-21 18:45 評論0 收藏0