Я работаю над надстройкой Outlook, у меня работает экспресс-сервер. Я устанавливаю веб-пакет, потому что мне нужно преобразовать js в es5, чтобы он работал в Outlook Desktop. Вот упрощенная структура проекта.
/public
/javascripts
ssoAuth.js
/addin
/commmands
commands.js
commands.html
/server
/bin
/helpers
app.js
Общая папка настроена как статическая папка на моем экспресс-сервере.
app.use(express.static(path.join(__dirname, '../public'),
Моя проблема в commands.js. Я импортирую ssoAuth.js с импортом модуля es6 с относительным путем:
import getGraphAccessToken from "/javascripts/ssoAuthES6.js";
Он отлично работает, когда я запускаю node ./server/app.js и загружаю надстройку Outlook, но когда я хочу использовать Webpack для сборки, импорт не работает, я получаю:
ERROR in ./addin/commands/commands.js
Module not found: Error: Can't resolve '/javascripts/ssoAuth.js'
Я не могу понять, как настроить веб-пакет, чтобы разрешить импорт из общей папки.
Вот мои файлы конфигурации webpack:
веб-пакет.config.js:
const config = {
devtool: "source-map",
entry: {
polyfill: "@babel/polyfill",
commands: "./addin/commands/commands.js"
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./addin/commands/commands.html",
chunks: ["polyfill", "commands"]
})
]};
webpack.server.config.js:
return ({
entry: {
server: './server/bin/www',
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
externals: [nodeExternals()],
module: {
rules: [
{
// Transpiles ES6-8 into ES5
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new CopyWebpackPlugin([
{
to: "./public",
from: "./public"
}
])
]})
Можете ли вы помочь разобраться в этом? Есть ли лучшая структура папок, которую я должен использовать, чтобы заставить ее работать?
Спасибо
Вы используете абсолютный путь
import getGraphAccessToken from "/javascripts/ssoAuthES6.js";
// ^ this will look in your topmost directory on your OS
Относительный путь от commands.js
будет таким:
import getGraphAccessToken from "../../javascripts/ssoAuthES6.js";
Кроме того, вы можете настроить Webpack на поиск модулей в корневом каталоге, добавив следующее в конфигурацию вашего веб-пакета:
{
// ...
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
},
// ...
}
Затем вы можете импортировать из корневого каталога вашего проекта из любого места, например:
import getGraphAccessToken from "javascripts/ssoAuthES6.js";
Некоторые другие моменты:
extensions: [".ts", ".tsx", ".html", ".js"]
, вам не нужно указывать расширения файлов для этих импортов..ts
и .tsx
в конфигурации вашего веб-пакета, но вы используете файлы .js
. Рассмотрите возможность удаления расширений Typescripttsconfig.json