parcel始めました
Parcelと言う気になる環境を見つけたのでちょっと触ってみた話。
インストール
$ npm install -g parcel-bundler
プロジェクトディレクトリにpackage.jsonを作成する
$ mkdir parcel-sample
$ cd parcel-sample
$ npm init -y
index.htmlとindex.jsを作成する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
index.js
alert("hello, parcel!");
parcelコマンドを実行してブラウザで確認する
$ parcel index.html
# parcelコマンドが見つからなかったらターミナルを再起動してみる
$ npm install -g parcel-bundler
$ mkdir parcel-sample
$ cd parcel-sample
$ npm init -y
index.htmlとindex.jsを作成する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
index.js
alert("hello, parcel!");
parcelコマンドを実行してブラウザで確認する
$ parcel index.html
# parcelコマンドが見つからなかったらターミナルを再起動してみる
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
index.js
alert("hello, parcel!");
$ parcel index.html
# parcelコマンドが見つからなかったらターミナルを再起動してみる
ブラウザで http://localhost:1234/ を開く(アラートが表示される)
良さそう。。。
gruntとかgulpとかの設定がいらない感じ。。。?
Adobe XDのチュートリアル
もうちょっとサンプル的なものをと思ってみたりみなかったり。
丁度良いのがないわけで。。。
さっき作ったparcel-sampleをそのままコピーして作ってみる。
$ cp -r parcel-sample xd-tutorial
ソースコードはsrcフォルダへ(jsとscssもsrc以下で分ける)
$ cd xd-tutorial
$ mkdir src
$ mkdir src/js; mkdir src/scss
$ mv *.html src
$ mv *.js src/js
とりあえず画面毎にhtml/js/scssを分けて作ってみる。
カルーセルは面倒くさいのでなし。。。
共通化、変数化もしない。。。
で、
出来たのがこれ
h23k/xd-tutorial
またもうちょっと触ってみよ。
続く。。。
Author And Source
この問題について(parcel始めました), 我々は、より多くの情報をここで見つけました https://qiita.com/h23k/items/35840642d033262a3d3c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .