質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Q&A

0回答

1946閲覧

Nuxt.jsでpluginsでimportしたnode_modulesをビルドする方法

Kosei

総合スコア13

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

0グッド

0クリップ

投稿2019/08/23 15:52

Nuxt.jsとFirebaseでwebアプリを開発しているのですが、pluginsからimportしているnode_modules内のパッケージをビルドできません。


端折ってますが大体こんな感じです

ディレクトリ構造

root │ firebase.json │ ├─ functions │ │ index.js │ │ nuxt-server.js │ │ package-lock.json │ │ package.json │ │ │ ├─ node_modules │ └─ nuxt │ ├─ public │ └─ src │ nuxt.config.js │ package-lock.json │ package.json │ ├─ node_modules ├─ pages │ └ index.vue └─ plugins └ index.js

firebase.json

json

1{ 2 "hosting": { 3 "public": "public", 4 "ignore": [ 5 "firebase.json", 6 "**/.*", 7 "**/node_modules/**" 8 ], 9 "rewrites": [ 10 { 11 "source": "**", 12 "function": "nuxtServer" 13 } 14 ] 15 } 16}

functions/index.js

javascript

1const functions = require('firebase-functions') 2 3const nuxtServer = require('./nuxt-server') 4exports.nuxtServer = functions.https.onRequest((req, res) => { 5 nuxtServer(req, res) 6})

functions/nuxt-server.js

javascript

1const { Nuxt } = require('nuxt') 2const config = { 3 dev: false, 4 buildDir: 'nuxt' 5} 6const nuxt = new Nuxt(config) 7 8module.exports = (req, res) => { 9 nuxt.renderRoute(req.path, { req }) 10 .then(result => { 11 res.send(result.html) 12 }) 13 .catch(err => { 14 console.error(err) 15 res.send(err) 16 }) 17}

src/nuxt.config.js

javascript

1export default { 2 mode: 'universal', 3 plugins: [ 4 '~/plugins/index.js' 5 ], 6 build: { 7 publicPath: '/assets/' 8 }, 9 buildDir: '../functions/nuxt' 10}

src/plugins/index.js 内で import しているパッケージが functions/nuxt にビルドされていないのか npm run dev でもnpm run start でもきちんと読み込まれるのに firebase serve だと Cannot find module と出てしまいます。

今は、 functions/node_modules に直接インストールして対処していますが、なんだかモヤモヤするしできればビルドしたいので、原因や解決方法がわかる方いたらお願いします。

ちなみに、webpackは触ったことがなくNuxt.jsを始めてビルドにwebpackが使われていることぐらいしか知りません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問