Я создал файл в веб-пакете, как этот
//src/testamd.js
import Vue from 'vue';
import VueI18n from "vue-i18n";
import BootstrapVue from "bootstrap-vue";
export {Vue, VueI18n, BootstrapVue}
, который я обычно могу использовать в других файлах веб-пакетов, как этот
import Vue from './src/testamd'
И я я пытаюсь сгенерировать модуль amd из этого файла, чтобы я мог использовать его в requirejs проекте
Это окончательная конфигурация веб-пакета
{
"context": "/view/frontend/web",
"entry": {
"main": "./src/testamd.js"
},
"mode": "development",
"output": {
"path": "/view/frontend/web/public/build/",
"filename": "[name].js",
"publicPath": "/build/",
"pathinfo": true,
"libraryTarget": "amd"
},
"module": {
"rules": [
{
"test": {},
"exclude": {},
"use": [
{
"loader": "babel-loader",
"options": {
"cacheDirectory": true,
"sourceType": "unambiguous",
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": {},
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}
}
]
},
{
"resolve": {
"mainFields": [
"style",
"main"
],
"extensions": [
".css"
]
},
"test": {},
"oneOf": [
{
"resourceQuery": {},
"use": [
{
"loader": "style-loader",
"options": {
"sourceMap": false
}
},
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 0,
"modules": true,
"localIdentName": "[local]_[hash:base64:5]"
}
}
]
},
{
"use": [
{
"loader": "style-loader",
"options": {
"sourceMap": false
}
},
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 0,
"modules": false,
"localIdentName": "[local]_[hash:base64:5]"
}
}
]
}
]
},
{
"test": {},
"loader": "file-loader",
"options": {
"name": "images/[name].[hash:8].[ext]",
"publicPath": "/build/"
}
},
{
"test": {},
"loader": "file-loader",
"options": {
"name": "fonts/[name].[hash:8].[ext]",
"publicPath": "/build/"
}
},
{
"resolve": {
"mainFields": [
"sass",
"style",
"main"
],
"extensions": [
".scss",
".sass",
".css"
]
},
"test": {},
"oneOf": [
{
"resourceQuery": {},
"use": [
{
"loader": "style-loader",
"options": {
"sourceMap": false
}
},
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 0,
"modules": true,
"localIdentName": "[local]_[hash:base64:5]"
}
},
{
"loader": "resolve-url-loader",
"options": {
"sourceMap": false
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": true,
"outputStyle": "expanded"
}
}
]
},
{
"use": [
{
"loader": "style-loader",
"options": {
"sourceMap": false
}
},
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 0,
"modules": false,
"localIdentName": "[local]_[hash:base64:5]"
}
},
{
"loader": "resolve-url-loader",
"options": {
"sourceMap": false
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": true,
"outputStyle": "expanded"
}
}
]
}
]
},
{
"test": {},
"use": [
{
"loader": "vue-loader",
"options": {}
}
]
},
{
"resourceQuery": {},
"type": "javascript/auto",
"loader": "@kazupon/vue-i18n-loader"
}
]
},
"plugins": [
{
"entriesToDelete": []
},
{
"opts": {
"publicPath": null,
"basePath": "build/",
"fileName": "manifest.json",
"transformExtensions": {},
"writeToFileEmit": true,
"seed": {},
"map": null,
"generate": null,
"sort": null
}
},
{
"paths": [
"**/*"
],
"options": {
"root": "/view/frontend/web/public/build/",
"verbose": false,
"allowExternal": false,
"dry": false
}
},
{
"definitions": {
"process.env": {
"NODE_ENV": "\"development\""
}
}
},
{
"options": {
"title": "Webpack Encore"
},
"lastBuildSucceeded": false,
"isFirstBuild": true
},
{},
{
"compilationSuccessInfo": {
"messages": []
},
"shouldClearConsole": false,
"formatters": [
null,
null,
null,
null,
null,
null
],
"transformers": [
null,
null,
null,
null,
null,
null
],
"previousEndTimes": {}
},
{
"outputPath": "public/build/",
"friendlyErrorsPlugin": {
"compilationSuccessInfo": {
"messages": []
},
"shouldClearConsole": false,
"formatters": [
null,
null,
null,
null,
null,
null
],
"transformers": [
null,
null,
null,
null,
null,
null
],
"previousEndTimes": {}
}
},
{
"options": {
"template": "./public/index.html",
"filename": "index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": false,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"chunksSortMode": "auto",
"meta": {},
"title": "Webpack App",
"xhtml": false
}
},
{
"options": {
"filename": "entrypoints.json",
"prettyPrint": false,
"update": false,
"fullPath": true,
"manifestFirst": true,
"useCompilerPath": false,
"fileTypes": [
"js",
"css"
],
"includeAllFileTypes": true,
"keepInMemory": false,
"integrity": false,
"path": "/view/frontend/web/public/build/",
"entrypoints": true
}
}
],
"optimization": {
"namedModules": true,
"chunkIds": "named",
"runtimeChunk": "single",
"splitChunks": {
"chunks": "all"
}
},
"watchOptions": {
"aggregateTimeout": 300,
"poll": 1000
},
"devtool": false,
"performance": {
"hints": false
},
"stats": {
"hash": false,
"version": false,
"timings": false,
"assets": false,
"chunks": false,
"maxModules": 0,
"modules": false,
"reasons": false,
"children": false,
"source": false,
"errors": false,
"errorDetails": false,
"warnings": false,
"publicPath": false,
"builtAt": false
},
"resolve": {
"extensions": [
".wasm",
".mjs",
".js",
".json",
".jsx",
".vue",
".ts",
".tsx"
],
"alias": {
"vue$": "vue/dist/vue.esm.js"
}
},
"externals": []
}
И теперь я был под Предположение, что я мог бы использовать требуют js, чтобы загрузить это и использовать экспортированные элементы, подобные этому
require(['testamd'], function (Vue, VueI18n, BootstrapVue) {
console.log(Vue);
console.log(VueI18n);
console.log(BootstrapVue);
});
Файл загружается, когда мой отладчик ломается внутри testamd.js, но результат из console.log говорит
Vue => 1
VueI18n => undefined
BootstrapVue => undefined
Я перепробовал множество конфигураций, как я нашел в отношении outpput в документах веб-пакета
- , используя umd вместо isd amd (тот же результат)
- , используя вместо этого именованную библиотеку из неназванного (он дал все переменные как неопределенные)
- с использованием экспорта по умолчанию в testamd. js
Но, похоже, результат всегда не тот, на который я рассчитывал.
Можно ли делать то, что я хочу, или я пытаюсь напрасно?
Это итоговый файл ввода
define(function() { return (window["webpackJsonp"] = window["webpackJsonp"] || []).push([["main"],{
/***/ "./src/testamd.js":
/*!************************!*\
!*** ./src/testamd.js ***!
\************************/
/*! exports provided: Vue, VueI18n, BootstrapVue */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm.js");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Vue", function() { return vue__WEBPACK_IMPORTED_MODULE_0__["default"]; });
/* harmony import */ var vue_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-i18n */ "./node_modules/vue-i18n/dist/vue-i18n.esm.js");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VueI18n", function() { return vue_i18n__WEBPACK_IMPORTED_MODULE_1__["default"]; });
/* harmony import */ var bootstrap_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! bootstrap-vue */ "./node_modules/bootstrap-vue/esm/index.js");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BootstrapVue", function() { return bootstrap_vue__WEBPACK_IMPORTED_MODULE_2__["default"]; });
/***/ })
},[["./src/testamd.js","runtime","vendors~main"]]])});;
Я обновляю с помощью Мои выводы о том, что проблема, похоже, возникла из-за моего использования symfony / webpack-encore
Новое обновление, я каким-то образом смог заставить его работать, изменив настройки оптимизации для кусков и времени выполнения. js на
"optimization": {
"namedModules": true,
"chunkIds": "named",
"splitChunks": {
"chunks": "async"
}
},