■webpack.config.js
const webpack = require("webpack");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
// モード値を production に設定すると最適化された状態で、
// development に設定するとソースマップ有効でJSファイルが出力される
mode: "development",
// ローカル開発用環境を立ち上げる
// 実行時にブラウザが自動的に localhost を開く
devServer: {
static: "dist",
open: true,
},
// メインとなるJavaScriptファイル（エントリーポイント）
entry: ./src/index.js,
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
path: ${__dirname}/dist,
// 出力ファイル名
filename: "main.js",
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
}),
],
//webpack-config.js
module: {
rules: [
{
test: /.css/,
use: [
"style-loader",
{
loader: "css-loader",
options: { url: false },
},
],
},
{
test: /.vue$/,
loader: "vue-loader",
},
{
test: /.js$/,
loader: "babel-loader",
// Babel のオプションを指定する
options: {
presets: [
// プリセットを指定することで、ES2021 を ES5 に変換
"@babel/preset-env",
],
},
},
],
},
// import 文で .ts ファイルを解決するため
resolve: {
// Webpackで利用するときの設定
alias: {
vue$: "vue/dist/vue.esm.js",
},
extensions: ["*", ".js", ".vue", ".json"],
},
plugins: [
// Vueを読み込めるようにするため
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
}),
],
};
■package.jsob
{
"scripts": {
"build": "webpack",
"start": "webpack serve",
"watch": "webpack --watch"
},
"devDependencies": {
"@babel/core": "^7.20.7",
"@babel/preset-env": "^7.20.2",
"babel-loader": "^9.1.0",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"jquery-ui": "^1.13.2",
"style-loader": "^3.3.1",
"vue-loader": "^15.10.1",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.75.0",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"jquery": "^3.6.3",
"jquery-ui-sass": "^0.0.1",
"vue": "^2.6.12"
}
}
■index.js
// import 文を使って sub.js ファイルを読み込む。
import { hello, hello2, test } from "./sub";
import autocomplete from "jquery-ui/ui/widgets/autocomplete";
import "jquery-ui/dist/themes/base/jquery-ui.css";
import "jquery-ui/dist/themes/base/theme.css";
//import "./style.css";
require("./style.css");
import Autocomplete from "./components/Autocomplete.vue";
import App2 from "./components/App2.vue";
import Vue from "vue";
import App from "./components/App"; // 作ったやつ
new Vue({
el: "#app2", // アプリをマウントする要素(セレクタで指定)
components: { App2 }, // Appというコンポーネントを使うよ、という宣言
template: "", // el(今回は#app)の中に表示する内容
});
var el = new Vue({
el: "#app",
components: { App2 },
data: function() {
return {
value: "",
type: "text",
placeholder: "Input",
datalist: [{ name: "Banana" }, { name: "Grape" }, { name: "Apple" }],
vueData: {},
fruits: ["みかん", "りんご", "メロン", "いちご", "ぶどう"],
fetchTagList: [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme",
"Test",
],
userTagList: [],
};
},
});
function split(val) {
return val.split(/( | )+/);
}
function extractLast(term) {
return split(term).pop();
}
$("[id^='tags']").autocomplete({
minLength: 0,
source: function(request, response) {
var last = extractLast(request.term);
const matchList = el.fetchTagList.filter((item) => item.indexOf(last) > -1);
response(matchList);
},
focus: function() {
return false;
},
select: function(event, ui) {
const index = event.target.dataset.index;
console.log("index = " + index);
el.userTagList.push({ id: "1", tag_name: "あいうえお" });
//el.userTagList.splice(index, 1, { id: "2", tag_name: "かきくけこ" });
el.userTagList[index] = { id: "2", tag_name: "かきくけこ" };
console.log("el.userTagList = " + el.userTagList[0].id);
console.log("el.userTagList = " + el.userTagList[0].tag_name);
var terms = split(this.value);
terms.pop();
terms.push(ui.item.value);
this.value = terms.join("");
return false;
},
});