Работая над проектом, я столкнулся со случаем, когда мне нужно загрузить сторонний файл, написанный в виде модулей AMD, с помощью тега script: <script type="text/javascript" src="https://cdn.host.com/external.js"></script>.
Файл содержит несколько модулей, которые использует пример кода например:
require(['src/module/MyObject'], (myObject) => {
// Use myObject
});
Пример включает Require JS в качестве тега сценария для включения этого синтаксиса. Теперь ... мой проект представляет собой приложение React с Webpack, в котором я хотел бы получить доступ к myObject где-то в компоненте, но я не могу заставить его работать.
Сбой только при использовании синтаксиса require () потому что Webpack пытается добавить код в комплект. Я попробовал альтернативу ' non_webpack_require ', сохранив тег сценария Require JS, но это, похоже, добавляет всевозможные конфликты в другом месте кода (неопределенные вещи повсюду). Я также попытался поэкспериментировать со свойством webpack 'External', но не могу заставить его работать так, как ожидалось. Последнее похоже на go, но я получаю 'src / module / MyObject' - неопределенные ошибки.
Любая помощь приветствуется.
Редактировать : как запрошена соответствующая часть моего webpack.config:
{
entry: './src/index.tsx',
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: `js/[name].[contenthash].bundle.js`,
chunkFilename: 'js/[name].[contenthash].js',
},
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['.ts', '.tsx', '.js', '.json'],
plugins: [
new TsconfigPathsPlugin(),
],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: "babel-loader",
},
exclude: [/node_modules/],
},
],
},
}