#javascript #webpack #antlr #antlr4
Вопрос:
Я новичок в webpack, так что извините, если это что-то очевидное. Я пытаюсь заставить пакет antlr4-webpack-loader работать, генерируя исходный код из .g4 файла. Я думаю, что я нахожусь там большую часть пути, так как у меня есть файл javascript require , и .bundle. файл, похоже, содержит вывод antlr4, однако в нем также есть это:
module.exports = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module 'antlr4/index'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
contentScript.js начинается, как показано ниже:
import 'jquery';
import 'antlr4'; // This line doesn't cause the error
import '../anaplan/AnaplanFormula.g4'; // This line causes the MODULE_NOT_FOUND error
webpack.config.js как показано ниже:
var webpack = require("webpack"),
path = require("path"),
fileSystem = require("fs"),
env = require("./utils/env"),
CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin,
CopyWebpackPlugin = require("copy-webpack-plugin"),
HtmlWebpackPlugin = require("html-webpack-plugin"),
WriteFilePlugin = require("write-file-webpack-plugin");
var options = {
mode: process.env.NODE_ENV || "development",
entry: {
contentScript: path.join(__dirname, "src", "js", "contentScript.js"),
background: path.join(__dirname, "src", "js", "background.js"),
},
output: {
path: path.join(__dirname, "build"),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /.css$/,
loader: "style-loader!css-loader",
exclude: /node_modules/
},
{
test: new RegExp('.(jpg|jpeg|png|gif|eot|otf|svg|ttf|woff|woff2)
Из того, что я могу сказать antlr4-webpack-loader , плагин создает новый процесс webpack только для файла .g4 и генерирует bundle.js файл из этого по мере его вывода, который затем объединяется в "родительский" файл. Я могу пройти через код внутри antlr4-webpack-loader , и это, похоже, работает (как я уже сказал, вывод из него, похоже, находится в моем contentScript.bundle.js файле. Я могу рассматривать это как нечто, о externals: [ 'antlr4/index' ], чем я предполагаю, потому что файлы, которые он генерирует из файла .g4, требуют этого, но ссылка должна быть разрешена сценарием, который требовал g4.
Для справки, package.json ниже , в который не входит antlr4 пакет devDependencies , однако я получаю ту же ошибку, когда включаю его в оба devDependencies и dependencies :
{
"name": "anaplanextension",
"version": "1.0.0",
"description": "",
"main": "background.js",
"directories": {
"lib": "lib"
},
"dependencies": {
"antlr4": "^4.9.2",
"arrive": "^2.4.1",
"jquery": "^3.6.0"
},
"devDependencies": {
"antlr4-webpack-loader": "^0.1.1",
"clean-webpack-plugin": "3.0.0",
"copy-webpack-plugin": "5.0.5",
"css-loader": "3.2.0",
"file-loader": "4.3.0",
"fs-extra": "8.1.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"style-loader": "1.0.0",
"webpack": "4.41.2",
"webpack-cli": "3.3.10",
"webpack-dev-server": "3.9.0",
"write-file-webpack-plugin": "4.5.1"
},
"scripts": {
"build": "node utils/build.js",
"start": "node utils/webserver.js"
},
"repository": {
"type": "git",
"url": "git https://github.com/georgeduckett/AnaplanExtension.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/georgeduckett/AnaplanExtension/issues"
},
"homepage": "https://github.com/georgeduckett/AnaplanExtension#readme"
}
Ответ №1:
Я рекомендую пойти здесь другим путем. Этот загрузчик webpack не обновлялся последние 4 года, использует довольно старую банку ANTLR4 (текущая версия 4.9.2) и использует среду выполнения Javascript, которая известна определенными проблемами.
Вместо этого я рекомендую вам переключиться на среду выполнения antlr4ts и использовать antlr4ts-cli для создания файлов из грамматики. Оба по-прежнему помечены как альфа, но я уже много лет использую эти пакеты (например, в моем расширении vscode vscode-antlr4).
С этим на месте вы можете удалить загрузчик webpack и сгенерировать файлы синтаксического анализа/лексера как часть процесса сборки.
),
loader: "file-loader?name=[name].[ext]",
exclude: /node_modules/
},
{
test: /.html$/,
loader: "html-loader",
exclude: /node_modules/
},
{
test: /.g4/,
exclude: /(node_modules)/,
use: {
loader:'antlr4-webpack-loader'
}
}
]
},
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules']
},
node: { module: "empty", net: "empty", fs: "empty" },
plugins: [
// clean the build folder
new CleanWebpackPlugin(),
// expose and write the allowed env vars on the compiled bundle
new webpack.EnvironmentPlugin(["NODE_ENV"]),
new CopyWebpackPlugin([{
from: "src/manifest.json",
transform: function (content, path) {
// generates the manifest file using the package.json informations
return Buffer.from(JSON.stringify({
description: process.env.npm_package_description,
version: process.env.npm_package_version,
...JSON.parse(content.toString())
}))
}
}]),
new WriteFilePlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
};
if (env.NODE_ENV === "development") {
options.devtool = "cheap-module-source-map";
}
module.exports = options;
Из того, что я могу сказать antlr4-webpack-loader , плагин создает новый процесс webpack только для файла .g4 и генерирует bundle.js файл из этого по мере его вывода, который затем объединяется в «родительский» файл. Я могу пройти через код внутри antlr4-webpack-loader , и это, похоже, работает (как я уже сказал, вывод из него, похоже, находится в моем contentScript.bundle.js файле. Я могу рассматривать это как нечто, о externals: [ 'antlr4/index' ], чем я предполагаю, потому что файлы, которые он генерирует из файла .g4, требуют этого, но ссылка должна быть разрешена сценарием, который требовал g4.
Для справки, package.json ниже , в который не входит antlr4 пакет devDependencies , однако я получаю ту же ошибку, когда включаю его в оба devDependencies и dependencies :
Ответ №1:
Я рекомендую пойти здесь другим путем. Этот загрузчик webpack не обновлялся последние 4 года, использует довольно старую банку ANTLR4 (текущая версия 4.9.2) и использует среду выполнения Javascript, которая известна определенными проблемами.
Вместо этого я рекомендую вам переключиться на среду выполнения antlr4ts и использовать antlr4ts-cli для создания файлов из грамматики. Оба по-прежнему помечены как альфа, но я уже много лет использую эти пакеты (например, в моем расширении vscode vscode-antlr4).
С этим на месте вы можете удалить загрузчик webpack и сгенерировать файлы синтаксического анализа/лексера как часть процесса сборки.