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

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

背景

學(xué)習(xí)一下parcel打包工具，并做筆記整理。方便查看。

安裝node

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

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

淘寶NPM鏡像

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

搭建parcel環(huán)境

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

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

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

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

打開項(xiàng)目中的package.json文件

找到scripts對(duì)象，在其中添加"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引進(jìn)index.html，將index.sass引進(jìn)index.js中

執(zhí)行 npm run dev命令

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

san的配置

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

npm init //初始化項(xiàng)目根目錄

npm install san --save //安裝san

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

打開項(xiàng)目中的package.json文件，找到scripts對(duì)象

"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" //導(dǎo)入san

san的起步

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94715.html

相關(guān)文章

2018前端值得關(guān)注的技術(shù)

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

xiao7cn 2019-08-29 14:12 評(píng)論0 收藏0
2018前端值得關(guān)注的技術(shù)

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

用戶84 2019-08-21 18:42 評(píng)論0 收藏0
Parcel - 極速零配置Web應(yīng)用打包工具

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

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

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

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

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

testHs 2019-08-21 18:45 評(píng)論0 收藏0