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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

webpackを利用した時にnode_moduleのvue.jsをrequireで読み込めなくて困っています。→ 訂正 importで読み込めなくて困っています。

mee12
mee12

総合スコア88

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3回答

0評価

1クリップ

643閲覧

投稿2022/03/17 04:10

編集2022/06/08 21:43

webpackを利用した時にnode_moduleをrequireで読み込めなくて困っています。
→ 訂正 webpackを利用した時にnode_moduleをimportで読み込めなくて困っています。

まずnpmでパッケージをインストールし、 (npm install)
webpackでビルド (npm run build)

までは成功したのですが、その後実際に使用するためにvue.jsをrequireで読み込もうとしたのですが、Uncaught ReferenceError: require is not defined が発生してしまいました。
コンソールでwindowにvueが含まれていなかったので読み込めないのかもしれませんが。

↓ 変更

webpack-config.js、そのほかの設定を見直しし、
importで読み込めるように調整をしていますがうまくいきませんでした。

どなたかわかる方いらっしゃいましたらお願いします。

本文のソースコードの追記は長くなってしまうため、ソースコードをそのまま変更しました。

txt

// フォルダ構成を修正  - Project - wwwroot - dist - main.js - js - Test1 - index.js - src - index.js - index.html (エントリポイント用のhtml) - node_modules - Views - Test1 - Index.html

package.json

// package.jsonを修正 { "name": "webapp", "version": "1.0.0", "description": "webapp use webpack", "repository": "webapp", "main": "index.js", "scripts": { "build": "webpack", }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.17.7", "@babel/preset-env": "^7.16.11", "babel-loader": "^8.2.3", "css-loader": "^6.7.1", "html-webpack-plugin": "^5.5.0", "mini-css-extract-plugin": "^2.5.3", "vue-loader": "^17.0.0", "vue-style-loader": "^4.1.3", "webpack": "^5.70.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" }, "dependencies": { "@popperjs/core": "^2.11.4", "bootstrap": "^5.1.3", "core-js": "^3.21.1", "vue": "^3.2.31" } }

webpack

// webpack-config.jsを修正 const path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { VueLoaderPlugin } = require("vue-loader"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry: { main: "./src/index.js", TestManagement_SampleLists: "./js/views/transaction.testmanagement/TestManagement_SampleLists/index.js" }, output: { filename: "[name].js", path: __dirname + "/dist" }, devtool: "source-map", mode: "development", module: { rules: [ { test: /\.js$/, include: path.resolve(__dirname, "/src"), loader: "babel-loader", options: { presets: ["@babel/preset-env"] } }, { test: /\.vue$/, loader: "vue-loader" }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"], } ], }, resolve: { // Webpackで利用するときの設定 alias: { "bootstrap$": "./bootstrap/dist/js/bootstrap.js", "vue$": "./vue/dist/vue.esm-bundler.js" }, extensions: ["*", ".js", ".vue"], }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", }), new MiniCssExtractPlugin({ filename: "./css/site.css", chunkFilename: "[name].css" }), new VueLoaderPlugin(), new webpack.DefinePlugin({ __VUE_OPTIONS_API__: false, __VUE_PROD_DEVTOOLS__: false, }) ] };

index.js

// app.js -> index.jsに変更、修正 import "@popperjs/core"; import "bootstrap"; import "vue"; import "../js/Test1/index.js

html

// htmlを修正 <script src="./dist/main.js"></script> <div id="app"> </div> <!-- 画面ごとのjavascript --> <!-- webpackから実行できるようになった --> <!-- <script type="module" src="./js/Test1/index.js" defer></script> -->

javascript

// javascriptを修正 import { createApp } from "vue"; // 入らない const app = createApp({ }); app.mount("#app");

現在の画面のコンソール
webpack-dev-serverを起動し、javascriptでブレークをすることはできたが、createAppが空だった。
イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

maisumakun

2022/03/17 04:29

> vue.jsをrequireで読み込もうとしたのですが 当該のファイルは、どのように使おうとしたのですか?
mee12

2022/03/17 06:14 編集

コメントありがとうございます。 <script type="module" src="./dist/app.bundle.js"></script>を const createApp = require("vue"); const app = createApp({ }); app.mount("#app"); のようにで使用しようとしてました。 答えになっていなければすみません。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。