We Keep Coding

how i can read file from vscode extension src

i want to read file from my src path, but i failed, i can only read file from absolute path, not from my src relatively path,
this is my code , low is tree , my code is in src/ i want to read file in ../jsconfig/*.json, but it not work
│
├─.vscode
│ extensions.json
│ launch.json
│ tasks.json
│
├─images
│ anzhuang.jpg
│
├─jsconfig
│ BHDZ.json
│ BHJG.json
| default.json
│
├─media
│ code.js
│ codicon.ttf
│ index.html
│ jsconfig.json
│ style.css
│
├─pic
│ icon.jfif
│
├─src
│ dbfCustomEditor.js
│ dbfDocument.js
│ dbfEditorProvider.js
│ extension.js
│
└─test
function matchJsonFile(dbfName){
var patten1 = dbfName.slice(0, -4)
var patten2 = dbfName
var res = "../default.json"
for (var i=0;i<jsonFiles.length;i++){
if (jsonFiles[i].search(patten1) >= 0){
res = jsonFiles[i]
break
}
if (jsonFiles[i].search(patten2) >= 0){
res = jsonFiles[i]
break
}
}
return res
}

SWC: module item found but is_es6 is false

I'm trying to move from babel to swc for compiling and bundling a react component library but I have trouble with the configuration.
When I run npm run spack, I get the following error:
thread '<unnamed>' panicked at 'internal error: entered unreachable code: module item found but is_es6 is false: ExportNamed(NamedExport { span: Span { lo: BytePos(954874), hi: BytePos(954914), ctxt: #0 }, specifiers: [Named(ExportNamedSpecifier { span: Span { lo: BytePos(954883), hi: BytePos(954890), ctxt: #0 }, orig: Ident(Ident { span: Span { lo: BytePos(954883), hi: BytePos(954890), ctxt: #4141 }, sym: Atom('default' type=static), optional: false }), exported: Some(Ident(Ident { span: Span { lo: BytePos(954883), hi: BytePos(954890), ctxt: #194 }, sym: Atom('default' type=static), optional: false })), is_type_only: false })], src: Some(Str { span: Span { lo: BytePos(954898), hi: BytePos(954913), ctxt: #0 }, value: Atom('./FormControl' type=dynamic), raw: Some(Atom(''./FormControl'' type=dynamic)) }), type_only: false, asserts: None })', crates/swc_bundler/src/bundler/chunk/cjs.rs:142:29
What I get from this error is that he fails to bundle React components. I can't find the is_es6 configuration mentioned in the error so I'm not sure how to solve this. I tried rereading the doc of swc without any success. The module part of the config doesn't seem to solve my problem.
Here is my working tree:
.
├── jest.config.ts
├── package-lock.json
├── package.json
├── spack.config.js
└── src
├── components
│ ├── FiltersBar
│ │ ├── FiltersBar.test.tsx
│ │ ├── FiltersBar.tsx
│ │ ├── __snapshots__
│ │ │ └── FiltersBar.test.tsx.snap
│ │ └── index.ts
│ └── index.ts
├── index.ts
└── libraries
├── helpers
│ ├── helpers.test.ts
│ ├── helpers.ts
│ └── index.ts
└── index.ts
Here is my .swcrc file:
{
"jsc": {
"target": "es2021",
"parser": {
"syntax": "typescript"
}
},
"module": {
"type": "commonjs"
}
}
I'm pretty new to all this stuff so please bear with me :)

Webpack config to generate bundles of two different React SPAs

I have a project with the following structure:
.
├── app
│   ├── icon.svg
│   ├── index.html
│   └── scripts
├── config
│   └── iparams.json
├── jest.config.js
├── manifest.json
├── __mocks__
│   └── svgrMock.js
├── package.json
├── public
│   ├── index.html
│   └── iparams.html
├── setUpTests.js
├── src
│   ├── App.css
│   ├── app.index.css
│   ├── app.index.js
│   ├── App.js
│   ├── App.test.js
│   ├── assets
│   ├── components
│   ├── Config.css
│   ├── config.index.css
│   ├── config.index.js
│   ├── Config.js
│   ├── hooks
│   ├── log
│   └── logo.svg
├── webpack.config.js
└── yarn.lock
It have two main SPAs: config and app, so, I need to generate two different bundles respectively to ./config and ./app using webpack. The ./src/config.index.js is the entry point of the config app, witch renders the ./src/Config.js React component to the ./config/iparams.html page (using the ./public/iparams.html template). The same logic holds for the app page.
Currently I'm using this webpack config without success:
'use strict';
const HtmlWebPackPlugin = require('html-webpack-plugin');
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
'../app/': ['#babel/polyfill', `${process.cwd()}/src/app.index.js`],
'../config/': ['#babel/polyfill', `${process.cwd()}/src/config.index.js`]
},
output: {
globalObject: 'this',
path: `${process.cwd()}/dist`,
filename: '[name].[contenthash:8].js',
chunkFilename: '[name].[contenthash:8].js',
publicPath: './scripts',
clean: true
},
devtool: 'source-map',
module: {
rules: [{
test: /\.(js|jsx|ts|tsx|test.js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [{
loader: 'file-loader',
options: {
name: '[name][contenthash:8].[ext]',
outputPath: '/assets/img',
esModule: false
}
}]
},
{
test: /\.html$/,
use: [{
loader: 'html-loader'
}]
}
]
},
plugins: [
new CleanWebpackPlugin({
dangerouslyAllowCleanPatternsOutsideProject: true,
dry: false
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css',
chunkFilename: '[name].[contenthash:8].css'
}),
new HtmlWebPackPlugin({
template: `${process.cwd()}/public/index.html`,
filename: `${process.cwd()}/app/index.html`
}),
new HtmlWebPackPlugin({
template: `${process.cwd()}/public/iparams.html`,
filename: `${process.cwd()}/config/iparams.html`
}),
new CopyWebpackPlugin([
{
from: 'dist/**/*',
to: '../app'
}
]),
],
optimization: {
moduleIds: 'deterministic',
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: -10,
chunks: 'all'
}
}
}
}
};
What is the correct webpack configuration for this use case? Note that I'm using a proprietary sdk which doesn't allow a custom build script, just a custom webpack config, also, the pages outputs must be ./app and ./config.

GulpJS can no longer finds task in list properly (Gulp 4)

My gulp file pretty much looks like this (simplified)
function copyAssets () {
return src(paths.assets, { base: './' })
.pipe(cache('asset-files'))
.pipe(dest(paths.build))
}
// Some more task functions
const build = parallel(copyAssets, brewCoffee, buildTypescript)
module.exports = { build, watch: series(build, watchFiles) }
But now when I list it it looks like:
[15:29:30] Tasks for .....
[15:29:30] ├─┬ <parallel>
[15:29:30] │ └─┬ <parallel>
[15:29:30] │ ├── copyAssets
[15:29:30] │ ├── brewCoffee
[15:29:30] │ └── buildTypescript
[15:29:30] └─┬ <series>
[15:29:30] └─┬ <series>
[15:29:30] ├─┬ <parallel>
[15:29:30] │ ├── copyAssets
[15:29:30] │ ├── brewCoffee
[15:29:30] │ └── buildTypescript
[15:29:30] └── watchFiles
And running things like gulp build will say that the task does not exist.
If I wrap the series / paralel function in an anonymised function I do see it appear in the list (like so)
const build = () => parallel(copyAssets, brewCoffee, buildTypescript)
module.exports = { build, watch: () => series(build, watchFiles) }
But then when running gulp build I'm getting
Did you forget to signal async completion?
as an error.
I know at some point this did work (a number of months ago). But now for some reason it doesn't anymore. If I run gulp --version the output is:
CLI version: 2.2.0
Local version: 4.0.0
edit: Hmmm. This seems to work
module.exports = { build: () => build(), watch: () => series(build, watchFiles)() }
But I doubt that's how I should actually do this stuff....
edit2: No, still broken, it runs now, and waits until completion. And then says the same error as before: The following tasks did not complete: build

When I have used parallel (very briefly) in the past I had to reference it from gulp.
E.g. Change:
const build = () => parallel(copyAssets, brewCoffee, buildTypescript);
to:
const build = () => gulp.parallel(copyAssets, brewCoffee, buildTypescript);
The same with series here:
module.exports = { build, watch: gulp.series(build, watchFiles) }

Try this:
var srcPaths = {
app: [
'wwwroot/app/**/*.ts'
],
js: [
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/typescript/lib/typescript.js',
'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js',
'node_modules/moment/moment.js'
],
}
gulp.task('watch', function () {
gulp.watch([srcPaths.app, srcPaths.js], gulp.series('js'));
});
It will work fine. Enjoy!

Webpack font not found

I started learning webpack and I have this small project
I'll be simplifying the content for brevity, hopefully it wont affect your understanding of the problem.
.
└── project
├── dist
│   ├── fonts
│   └── js
├── src
│   ├── app
│ │ ├── app.js
│ │ └── component
│ │ ├── component.css
│ │ ├── component.directive.js
│ │ └── component.html
│   └── fontello
├── index.html
├── package.json
└── webpack.config.js
I'm trying to keep everything inside my component encapsulated so I have:
component.directive.js
require('../../fontello/css/fontello.css');
require('./component.css');
var angular = require('angular');
...
module.exports = angular.module('directives.component', [])
.directive('component', component)
.name;
app.js
var angular = require('angular');
var component = require('./component/component.directive.js');
...
angular.module('app', [component])
and webpack.config.js
var webpack = require('webpack');
module.exports = {
context: __dirname + '/src',
entry: {
app: './app/app.js',
vendor: ['angular']
},
output: {
path: __dirname + '/dist',
filename: 'js/app.bundle.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "js/vendor.bundle.js")
],
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader',
exclude: ['./src/fontello']
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}, {
test: /\.html$/,
loader: 'raw'
}]
}
};
and I get for woff2/woff/ttf
404 Not Found. GET http://localhost:8080/fonts/fontello.woff2
what am I doing wrong?