---
title: 20200901 Astro Camp js workshop
tags: Astro Camp, javascript
---
>20210707 更新
# 20200901 Astro Camp js workshop
:::info
repuire 跟 import 盡量使用 import
:::

先將 app/javascript 資料夾改名為 frontend
> 因為裡面不只包含 javascript

新增 `script` 、`stylesheet` 兩個資料夾，在資料夾中各新增一個 `index.js`，用來 `import` 個別檔案用。

在 `app/frontend/pack/application.js`中 ，`require` 剛剛的資料夾

`yarn add bootstrap jquery @popper/core`
> bootstrap 5 popper.js 是已經有包含在裡面的，所以要安裝 `@popper/core`

在 `app/frontend/script/index.js` 中

import "@popperjs/core/"
import "jquery"
import "bootstrap"

打開 `bin/webpack-dev-server`

看錯誤訊息，少什麼裝什麼，然後在 import 到 `script/index.js`

/* app/frontend/stylesheet/application.scss */
@import "~bootstrap/scss/bootstrap.scss";

// app/frontend/stylesheet/index.js
import "bootstrap/dist/css/bootstrap.css"
import "./application.scss"

要使用gem webpacker 的plugin 的設定檔設定

在config/webpack/environment.js

const webpack = require('webpack')

# 可以將東西變成全域，不用自己寫 import $ from 'jquery'
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    moment: 'moment'
    # 'window.Tether': 'tether',
    # Popper: ['popper.js', 'default'],
    # ActionCable: 'actioncable',
    # Vue: 'vue',
    # VueResource: 'vue-resource',
  })
)

最後，在 `application.html.erb` 中，
將 `<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>`

改成

`<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
`
ok desu

------------

先yarn add selected2

在application.js

import $ from 'jquery';
//還是抓不到＄，把他綁在window的屬性上
window.$ = $ 

import 'select2'
import 'select2/dist/css/select2.css'

先 yarn add sweetalert
在application.js

import swal from 'sweetalert2'

document.addeventListener('turbolinks:load',function(){
    swal('任何一个傻瓜都会用电脑')
})

先 yarn add tempusdominus-bootstrap-4

import 'tempusdominus-bootstrap-4'
發現沒有jquery?

在裝 font-awsome
繼續import (別忘了css)