如何在es6中import p5 library

Question

環境
node.js
parcel (打包工具)

問題描述

已將p5下載至node_modules中
如何在js的檔案中將p5引入進去,並做使用

問題一:
目前所使用的方式如下

import p5 from 'p5';

p5.setup = () =>{

}
p5.draw = () =>{
    ellipse(50, 50, 80, 80);
}

這樣的的引入方式在parcel打包時,程式並沒有出錯
但是開始瀏覽器時仍然沒有出現畫面

問題二:
上述是將整包p5引入進來
如果僅僅引入這包資料中的 p5.min.js要如何實踐
嘗試使用方法如下

import p5 from './p5.min.js';

這樣子parcel打包時會顯示錯誤訊息

 C:\Users\user\Dropbox\p5\p5_one\src\script.js:3:15: Cannot resolve dependency './p5.min.js' at 'C:\Users\user\Dropbox\p5\p5_one\src\p5.min.js'

Answer 1

那得看 p5.min.js 这个js是否支持es6模块语法

Answer 2

import * as p5 from 'p5';
let s = (sk) => {    
    sk.setup = () =>{
        sk.createCanvas(window.innerWidth,window.innerHeight);
    }

    sk.draw = () =>{

    }
}
const P5 = new p5(s);

这样干 ；)