ASP.NET Core MVC webpackを使用してimportしたい

ASP.NET Core MVC webpackを使用してimportしたいのですが、

こちらのサイトのこの記事を読んでまして、typescriptでなく、javascriptを使っているのですが、

ASP.NET Core で webpack を使う
https://www.umayadia.com/Note/Note036ASPNETCoreWebpack.htm


npx webpackは問題なく通るのですが、

importを書いても
Uncaught SyntaxError: Cannot use import statement outside a module というエラー　が出てしまい、

共通ファイルに　<script src="~/dist/bundle.js" type="module"></script>　と記述しても、同じエラーが出てしまい、解決できませんでした。

ASP.NET Core MVCですが、importができない原因はどんなことが考えられるでしょうか？

どなたかもしわかれば教えて下さい。


- webpack.config.js ----------------------------------------
const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: path.join(__dirname, "wwwroot", "source", "site.js"),
    output: {
        path: path.join(__dirname, "wwwroot", "dist"),
        filename: "bundle.js"
    },
    devtool: "source-map",
    mode: "development",
    resolve: {
        extensions: [".js", ".vue"],
        alias: {
            "vue$": "vue/dist/vue.global.js",
            "ag-grid-community$": "ag-grid-community/dist/ag-grid-community.js",
            "axios$": "axios/dist/axios.js",
            "chart.js$": "chart.js/dist/chart.js",
            "file-saver$": "file-saver/dist/FileSaver.js",
            "luxon$": "luxon/src/luxon.js"
            // Bootstrap5はcss中の$でエラーしたのでコメントアウトしてます
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [ "style-loader", "css-loader" ]
            }
        ],
    }
}
----------------------------------------

- index.js(importを実行したファイル) ----------------------------------------
import { createApp } from "vue"

const app = createApp({

});

app.mount("#app");
----------------------------------------

Vue.js は使ったことがないのですが、TypeScript + React とは環境や設定が異なるはずです。

マイクロソフトが、Visual Studio で Vue.js を使う記事を公開しているので、参考になりそうです。
https://docs.microsoft.com/ja-jp/visualstudio/javascript/create-application-with-vuejs?view=vs-2019

yu さんの投稿内容を見た限りでは、module.rule.test が css になっていますし、ローダーには vue-loader や babel-loader を使用することになりそうです。
このあたりは、上のマイクロソフトの手順通りにやれば、できると思います。


ところで、サーバーサイドにVBかC#を使うのであれば、プロジェクトを分けて、フロントエンドのVue.js を独立したプロジェクトにする方が苦労が少ないかもしれません。そのような構成にすれば、Vue.js部分は完全に上記のマイクロソフトの記事と同じで良いかもしれないからです。
それに世間には Vue.js や C# の情報が大量にありますが、Vue.js + C# を組み合わせた情報は極端に少なくなるので、この点からもこの２つを組み合わせるのではなく、別々のもとして構築し、フロントエンドのVue.jsからはWebAPIでサーバーサイドのC#を呼び出すという構成が楽なように思います。

>> るきおさん
ありがとうございます。

教えて頂いたURLのほうも試してみたいと思います。
javascriptのライブラリ等はjsファイルをローダーで読み込むことは必要なのでしょうか？babel-loaderも試してみましたができませんでした。


現在仕事で作成しているプロジェクトはASP.NET Core MVCでして、WebAPIのような利用方法を取っており(axiosでPostしてる)

ASP.NET CoreのWeb APIの利用も考えてはいましたが、


フロントエンドとサーバーを分けることを考えるのは私も賛成ではありますが、


Web APIのデメリットとして、

・参考となる情報がかなり少なく難しい、かつ標準のWebAPIテンプレートがよくわかりませんでした。 (ASP.NET Core MVCの情報はたくさんあるが)

・WebAPIの時はログイン認証機能をどのようにするか、実装するにも敷居が高い　(ASP.NET Core MVCは標準のテンプレートで実装されているが)


いちおう、Vue.jsで認証機能を作る方法はあるみたいですが、

入門: Vue.jsで認証機能を作る
https://qiita.com/koduki/items/b4b56a27c6b7406a4ddb

・ログインリクエストをAPIに送る
・APIがトークン等なんらかの認証情報を返す
・受け取った情報をVuex（Vue上のストレージ層）に保存する
・Vue RouterでVuexに格納したパラメータの有無を判定し、無ければログインページなどにリダイレクトする


Vue RouterとかVuexも出てきますので敷居は高いかもしれません。　(MVCのテンプレートだと自動でやってくれるので、Controllerのメソッドに属性タグをつけるだけになります。)


となるので、難しいかもしれません。

(削除されました)

教えて頂いたURLのVue-Cliは実行してみましたがうまくいきませんでした。

ただ、今回はASP.NET Core MVCのVueのjavascript部のVueに置き換えているだけなので、

Vue-Cliでアプリケーション雛形をつくるのは大掛かりすぎるかもしれません。


いまわかっていることは　webpackのバンドルファイルでのみ、importがつかえるっぽいです。

Bootstrapのcssは遅延こそするものの、実行されているようです。


その他、importがうまくいってなかったり、エラーしている個所はあるので、うまくいっているわけではありませんが。

- webpack.config.js ----------------------------------------
const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: {
        main: "./src/js/app.js"
    },
    output: {
        path: path.resolve(__dirname, "..", "wwwroot", "dist"),
        filename: "app.bundle.js"
    },
    devtool: "source-map",
    mode: "development",
    resolve: {
        extensions: [".js", ".vue"],
        alias: {
            "vue$": "vue/dist/vue.global.js",
            "ag-grid-enterprise$": "ag-grid-enterprise/dist/ag-grid-enterprise.js",
            "axios$": "axios/dist/axios.js",
            "bootstrap$": "bootstrap/dist/js/bootstrap.js",
            "chart.js$": "chart.js/dist/chart.js",
            "file-saver$": "file-saver/dist/FileSaver.js",
            "jquery$": "jquery/dist/jquery.js",
            "jquery-validation$": "jquery-validation/dist/jquery.validate.js",
            "jquery-validation-unobtrusive$": "jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js",
            "luxon$": "luxon/src/luxon.js"
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ "style-loader", "css-loader" ]
            },
            {
                test: /\.js?$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            },
        ],
    }
}

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

-　app.bundle.js　-------------------------------------------------
import "bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"

import "jquery"
import "jquery-validation"
import "jquery-validation-unobtrusive"

import "vue"
import "ag-grid-enterprise";
import "axios"
import "chart.js"
import "file-saver"
import "luxon"

// Custom CSS imports
import "../css/site.css"


console.log("The app.js bundle has been loaded!");

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

↓

app.bundle.jsをscript type="module"で読み込み

-　_Layout.cshtml　-------------------------------------------------
<script type="module" src="~/dist/app.bundle.js"></script>

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

>教えて頂いたURLのVue-Cliは実行してみましたがうまくいきませんでした。
うまくいかなかったところを具体的に教えていただければ何かアドバイスできるかもしれません。
(できないかもしれません…)

>いまわかっていることは　webpackのバンドルファイルでのみ、importがつかえるっぽいです。
理屈は私もその理解です。
そのwebpackをうまく使うのがなかなか大変ですよね。

(削除されました)

>>るきおさん
お返事遅くなってすみません。

いま、ある情報からvue-cliを使わずにwebpack経由でimportを利用できる方法を教えていただきました。
bundleで圧縮する必要もないようです。

また、ASP.NET Core MVCの設定次第で、wwwroot以外にも置ける可能性があります。
とりあえず試行なので、wwwrootフォルダに置いたまま試しています。


以下のコードが入手できたものです。
課題として、HtmlWebpackPluginの使い方を調べているのですが、ちょっとわかっていないです。

もしわかれば教えていただきたいですが、これは使用したいファイルのパスを全て指定する必要があるのでしょうか？



また、これは.vueファイルを使う前提となっているので、そもそもsrcフォルダを置かないといけないのかもしれません。
そもそも、Viewのhtmlとjavascriptを別フォルダにするというのが、Vueの流儀にあっていないかも。

教えてもらったVueの基本はこのようでした。

/src
 - App.vue　　・・・ templateとjavascript、cssの本体(よくある　templateとimport, exportを使用しているコード)

 - index.html　・・・ vueの<div id="app">の指定と.vueファイルのtemplateタグの使用
　　　　　　　　　　　main.jsを読み込んでいるところが見当たらなかった。

 - main.js　　　・・・ vueをrequiredで読み込み、App.vueをimport、createAppだけしていた。


実現したかった事はhtmlで簡単にjavascript moduleとして使いたいと思ってましたが、Vueの基本から考えないといけないかもです。



-package.json-
{
  "name": "vue3webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "npm test",
    "start": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@vue/compiler-sfc": "^3.2.20",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.4.0",
    "html-webpack-plugin": "^5.3.2",
    "rimraf": "^3.0.2",
    "vue": "^3.2.20",
    "vue-loader": "^16.8.1",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.58.2",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@vue/reactivity": "^3.2.20",
    "vue-class-component": "8.0.0-rc.1"
  }
}
--

-.babelrc.js-
module.exports = {
    presets: ['@babel/preset-env'],
}
--

-webpack.config.js-
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
  ]
};
--

> いま、ある情報からvue-cliを使わずにwebpack経由でimportを利用できる方法を教えていただきました。
> bundleで圧縮する必要もないようです。
これを教えていただかないと、その後のご質問にはお答えのしようがないです。
vue init 時点で webpackのテンプレートを使用せずに自力でwebpackを使う方法とお見受けしました。


> 課題として、HtmlWebpackPluginの使い方を調べているのですが、ちょっとわかっていないです。
> もしわかれば教えていただきたいですが、これは使用したいファイルのパスを全て指定する必要があるのでしょうか？
情報が断片的で、具体的なことがわからずです。
私は HtmlWebpackPlugin を使ったことがないです。


> ASP.NET Core MVC webpackを使用してimportしたい
やりたいことが変わっているのでなければ、私は以前紹介したマイクロソフトの記事の通りにやることをお勧めします。
https://docs.microsoft.com/ja-jp/visualstudio/javascript/create-application-with-vuejs?view=vs-2019