Help us understand the problem. What is going on with this article?

stringifyを使ってテンプレートへhtmlファイルをrequireできるようにする

More than 5 years have passed since last update.

Vue.jsを触っていたときに、componentに指定するtemplateでhtmlファイルを直接requireしたいと感じた。こんなときがbrowserifyの使いどころ(?)だと思ったはなし。

...

// template: <div>Hello!</div>ではなくて
// 下みたいな感じにファイル名指定でテンプレートをrequireしたい

var components = {
  root: Vue.extend({
    template: require("./main.html")
  }),
  entrance: Vue.extend({
    template: require("./entrance.html")
  })
};

...

いろいろ調べたところ、stringifyというパッケージを使うとコンポーネントのテンプレートへ渡すために文字列化したhtmlをjsファイルにbundleすることができて、結果requireできるようになるらしい。

Gulpfile

自分のプロジェクトでは下のような感じでjs/ディレクトリ以下に入っているソースを一旦application.jsにまとめてdist/ディレクトリに放り込んでいる。

gulpfile.js
var targets = [
  ...

  js: [
    "./js/*.js",
    "./js/**/*.js"
  ],

  ...
]

var concatJS = "application.js"
var destDir = "./dest/";
...

gulp.task("concat-js", function() {
  return gulp.src(targets.js)
    .pipe(plumber())
    .pipe(concat(concatJS))
    .pipe(gulp.dest(destDir))
});

...

テンプレートエンジンにはjadeを使っているのでもちろんjadeをトランスパイルするタスクもある

gulpfile.js
var targets = [
  ...

  jade: [
    "./jade/*.jade",
    "./jade/**/*.jade",
    "./jade/**/_*.jade"
  ],

  ...
]

...

gulp.task("jade", function() {
  return gulp.src(targets.jade)
    .pipe(plumber())
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest(destDir))
});

つまりjadeのタスクが終わるときにはjsのタスクで生成されるapplication.jsと同じdest/以下にhtmlファイルがjadeファイルと同じ数だけ生成されることになっている。

さて、こういう環境を前提にした上でのbrowserifyのタスクがこちら。

gulpfile.js
...

var stringify  = require("stringify");
var browserify = require("browserify");
var source     = require("vinyl-source-stream");

...

gulp.task("browserify", function() {
  return browserify({
      entries: [destDir + concatJS]
    })
    .transform(stringify([".html"]))
    .bundle()
    .pipe(source(concatJS))
    .pipe(gulp.dest(destDir))
});

stringifyはテキストファイルなどをrequireできるようにしてくれるパッケージで、.html以外にも何でもいけるとのこと。ちなみにminifyオプションやらrequireするときの拡張子を省くextensionsオプションやら、stringifyにはいろいろあるらしいのでnpmのページを見に行くとよさそう(https://www.npmjs.com/package/stringify)

ファイルパスの指定はなにが何なのか一瞬混乱したけれど、とりあえずはentries: [...]へ指定したファイルにbrowserifyが適用されてsource(...)へ出て行くみたいな、そんな感じ。(ちなみにentriesにはワイルドカード指定ができなかった)

まとめ

ここまでやって生成されたapplication.jsを開いてみると、ソースの中にhtmlの中身がstringify(文字列化)されたものが埋め込まれているのがわかる。requireするファイルがソースの中に埋め込まれているってのは若干不思議な気がしたけれど、今回のケースではbrowserifyがgulpのタスクとして予めrequireをパースして処理していると考えれば、requireは実際はただのマークみたいなものだと考えていいのかもしれないと思った。

IzumiSy
Elmエンジニャー / https://dev.to/izumisy
https://izumisy.work
fringe81
Fringeは、最新のテクノロジーとプロフェッショナルによるサービスにより、社会課題に仮説を立てて市場に広げていくことで、数十年という長期的なスパンで価値を生み出し続け、より良い世界を創る集団です。 既存の領域に限らず、時流を読み、仮説を生み出し、テクノロジーの力で優れたサービスを生み出し続けます。
https://www.fringe81.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away