Vue CLIでjavascript/cssをひとつのhtmlに埋め込む

May 28, 2020 by Chachay
, ,

クラウドストレージなどでHTMLプレビュー機能が強化され、Vueで作ったSingle Page Applicationもホストしたりできそうという期待から、 JavascriptやCSSの全てをひとつのHTMLファイルに埋め込む方法を試しました。

環境

VueのVersion等

いわゆるデフォルトのプロジェクトを使います。

html-webbpack-inline-source-pluginの導入

javascriptとcssの展開・埋め込みにhtml-webpack-inline-source-plugin - npmを使います。

yarn add --dev html-webpack-inline-source-plugin

Buildの設定(vue.config.js)

プロジェクトのルートにvue.config.jsを作成します。

// vue.config.js
module.exports = {
  css: {
    extract: false
  },
  chainWebpack: config => {
    config.plugin('inline-source')
      .use(require('html-webpack-inline-source-plugin'))

    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { limit: 10240 }))

    config
      .plugin('html')
      .tap(args => {
        args[0].inlineSource = '.(js|css)$'
        return args
      })
  }
}

あとはいつもどおり

yarn build

で/dist以下にindex.htmlが作成されます。

参考

at
No comments:

[javascript] Array of ObjectsとObject of Arraysの相互変換

May 19, 2020 by Chachay
,
JavascriptでArray of ObjectsとObject of Arraysの変換をたまに使うのでメモ。

はじめに

Array of Objects

const array_objects = [
  { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
  { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
  { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
  { age: 38, first_name: 'Jami', last_name: 'Carney' }
]

Object of Arrays

const object_arrays = {
  age: Array [40, 21, 89, 38], 
  first_name: Array ["Dickerson", "Larsen", "Geneva", "Jami"],
  last_name: Array ["Macdonald", "Shaw", "Wilson", "Carney"] 
}

Array of Objects → Object of Array

使いみち

  • グラフ描画系ライブラリの利用時

コード

const new_object_arrays = Object.assign(
  ...Object
    .keys(array_objects[0])
    .map( key => ({ [key]: array_objects.map( o => o[key] ) }))
  );

Object of Array → Array of Objects

使いみち

コード

const new_array_object = Object.keys(object_arrays).reduce(
  (r, key) =>{
    object_arrays[key].forEach(
      (value, i) => {
        r[i] = r[i] || {}
        r[i][key] = value
      })
      return r
  }, [])
または
const new_array_objects = object_arrays[Object.keys(object_arrays)[0]].reduce(
  (r, _, i) =>{
    r.push(
       Object.assign(...Object
      .keys(object_arrays)
      .map( key => ({ [key]: object_arrays[key][i]})))
    )
    return r
  },[])
at
No comments:

Chrome拡張の'Create Link'設定メモ

May 05, 2020 by Chachay
,

Chromeでさっとリンクを作りたいときに使っているExtention Create Link の設定メモ

ソースコード@githubはku/CreateLink: Make Link alternative to chrome

Formats

いつも使いの基本のフォーマット。markdownはデフォルトで定義されているけど、特にエスケープすると逆に困る場面に遭遇しているので置き換えている。

markdown
[%title%](%url%)
Restructured Text(reST)
`%title% <%url%>`_
pug (jade)
a(href="%url%") %title%

Filter

Amazonのリンクを簡略化したいときなんかにFilter Columnに追加する内容。

正規表現に自信がなければ、RegExr: Learn, Build, & Test RegExの利用がおすすめ。

Filterの文法が下記で定義されているのでスラッシュ(Forward Slash)はHEXでエスケープ(\x2F)する必要がある。

var m = def.filter.match(/^s\/(.+?)\/(.*?)\/(\w*)$/);
Amazonリンク クリーナー(For HTML, Pug, Markdown)
s/(https.*amazon\.co\.jp\x2F).*(?:d|dp|ASIN|product)\x2F(\w{10})(?:\x2F|\?).*?(?="|>|\))/$1dp/$2//g
Amazonリンク クリーナー(For Direct Text)
s/(https.*amazon\.co\.jp\x2F).*(?:d|dp|ASIN|product)\x2F(\w{10}).*/$1dp/$2//g
at
No comments: