My main code is under chokidar watched folder, when a file changes it emit an event
The main script is this
const fileName = "test.ts";
import(fileName).then((t: any) => {
t.default();
});
and this is the file test.ts
export default () => {
console.log("aaa");
};
I need to reimport file when I change test.ts, for example, I need this
START script
OUTPUT "aaa"
CHANGE test.ts from "console.log("aaa")" to "console.log("bbb")"
OUTPUT "bbb"
The solution is to use decache, full code is this (with chokidar folder watcher)
const folder = chokidar.watch("./myFolder", {
ignored: /(^|[\/\\])\../,
persistent: true,
});
folder
.on("add", (fileName: string) => {
const mod = require(fileName)
mod.default();
.on("change", (fileName: string) => {
decache(fileName);
const mod = require(fileName)
mod.default();
})
Related
I'm using CRA with CRACO to add another entry file to webpack configuration.
Here is the code:
module.exports = {
webpack: {
configure: (webpackConfig, {paths}) => {
return {
...webpackConfig,
entry: {
main: paths.appIndexJs,
content: './src/chromeServices/DOMEvaluator.ts',
},
}
},
},
}
However I don't need this file to be injected into the HTML file, is that possible to do so?
It is very easy to do so. CRACO and ultimately CRA make use of html-webpack-plugin to generate your HTML file and add the required script tags. You will have to make use of chunk filtering to achieve this.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
webpack: {
configure: (webpackConfig, {paths}) => {
// 1. Find instance of HTML Webpack plugin
const pluginInstance = webpackConfig.plugins.find(
webpackPlugin => webpackPlugin instanceof HtmlWebpackPlugin
);
// 2. Define the exclusion or inclusion
if (pluginInstance) {
pluginInstance.options.excludeChunks = ['content'];
// Or, alternately, use include only feature
// pluginInstance.options.chucks = ['main'];
}
return {
...webpackConfig,
entry: {
main: paths.appIndexJs,
content: './src/chromeServices/DOMEvaluator.ts',
},
}
},
},
};
I have a react app where I wanted to import a javascript file from a third-party library but file is mark with shebang #!/usr/bin/env node.
I found (e.g. here How to Configure Webpack with Shebang Loader to Ignore Hashbang Importing Cesium React Component into Typescript React Component) I can load file by overriding webpack configuration and adding a new loader shebang-loader (I also have tried shebang-loader2) but overriding webpack in react app is recommended only with #craco/craco so I added it to package.json and tried add loader to existing webpack-config.js.
I produced this lines of code. File craco.config.js:
const throwError = (message) =>
throwUnexpectedConfigError({
packageName: 'craco',
githubRepo: 'gsoft-inc/craco',
message,
githubIssueQuery: 'webpack',
});
module.exports = {
webpack: {
configure: (webpackConfig, {paths}) => {
const shebangLoader = { test: /node_modules\/npm-groovy-lint\/lib\/groovy-lint.js$/, loader: "shebang-loader" }
const {isAdded: shebangLoaderIsAdded1} = addAfterLoader(webpackConfig, loaderByName('url-loader'), shebangLoader);
if (!shebangLoaderIsAdded1) throwError('failed to add shebang-loader');
return webpackConfig;
},
},
};
It resolves problem with shebang and it ignores #!/usr/bin/env node but now I still get error
Module parse failed: Unexpected token (14:16)
File was processed with these loaders:
* ./node_modules/shebang2-loader/index.js
You may need an additional loader to handle the result of these loaders.
| const { getSourceLines, isErrorInLogLevelScope } = require("./utils");
| class NpmGroovyLint {
> "use strict";
| options = {}; // NpmGroovyLint options
| args = []; // Command line arguments
It looks like it does not recognise "use strict" line.
Can anyone put some suggestions what should be a problem ?
After few hours of investigation, I have finally come to a resolution. Firstly I have to say that there is no option to use NpmGroovyLint in react-like applications that run in browsers because after I resolved mentioned problem up here I figured that NpmGroovyLint uses node libraries as perf_hooks which are not available in a browser enviroment.
But I can post code that resolves the problem described in my question. It was needed to add a plugin to babel-loader named 'plugin-proposal-class-properties'. Here is my snipped of craco config. You can use it as a recipe occasionally.
const {addAfterLoader, getLoaders, loaderByName, removeLoaders, throwUnexpectedConfigError} = require('#craco/craco');
const throwError = (message) =>
throwUnexpectedConfigError({
packageName: 'craco',
githubRepo: 'gsoft-inc/craco',
message,
githubIssueQuery: 'webpack',
});
module.exports = {
webpack: {
configure: (webpackConfig, {paths}) => {
const {hasFoundAny, matches} = getLoaders(webpackConfig, loaderByName('babel-loader'));
if (!hasFoundAny) throwError('failed to find babel-loader');
const {hasRemovedAny, removedCount} = removeLoaders(webpackConfig, loaderByName('babel-loader'));
if (!hasRemovedAny) throwError('no babel-loader to remove');
if (removedCount !== 2) throwError('had expected to remove 2 babel loader instances');
//add plugin proposal class properties to existing babel loader
const propClassOptions = {...matches[1].loader.options, ...{plugins: ["#babel/plugin-proposal-class-properties"]}};
const propClassLoader = {...matches[1].loader, ...{options: propClassOptions}};
const babelLoaderWithPropClassPlugin = {...matches[1], ...{loader: propClassLoader}};
const shebangLoader = {
test: /node_modules\/npm-groovy-lint\/lib\/groovy-lint.js$/,
use: [{loader: 'shebang2-loader'}, {...{loader: require.resolve('babel-loader')}, ...{options: propClassOptions}}]
}
const {isAdded: babelLoaderWithPropClassIsAdded} = addAfterLoader(webpackConfig, loaderByName('url-loader'), matches[0].loader);
if (!babelLoaderWithPropClassIsAdded) throwError('failed to add ts-loader');
const {isAdded: babelLoaderIsAdded} = addAfterLoader(webpackConfig, loaderByName('babel-loader'), babelLoaderWithPropClassPlugin.loader);
if (!babelLoaderIsAdded) throwError('failed to add back babel-loader for non-application JS');
const {isAdded: shebangLoaderIsAdded1} = addAfterLoader(webpackConfig, loaderByName('url-loader'), shebangLoader);
if (!shebangLoaderIsAdded1) throwError('failed to add shebang-loader');
return webpackConfig;
},
},
};
I have a script which generates a file, call it auto.js. This file contains some dynamically generated imports and is being used within a VueJS project.
// auto.js
import { apple, strawberry, orange } from 'delicious-fruits';
import { carrot, cucumber, celery } from 'delicious-vegetables';
While using Webpacks dev server, should any project file change, my goal is to have this script re-generate my auto.js file, and then have that included in the re-compiled project.
I have turned this script into a Webpack plugin, whereby I'm listening for the watchRun compiler hook. This seems like the ideal hook, per its description:
Executes a plugin during watch mode after a new compilation is triggered but before the compilation is actually started.
class AutoGenerate {
constructor(options) {
this.options = options;
}
apply(compiler) {
compiler.hooks.watchRun.tap('AutoGenerate', () => {
generateFile()
})
}
}
function generateFile () {
// generate auto.js and write to disk
}
I always wind up with an infinite loop situation. I have tried approaching the problem by using various life cycles events (hooks), as well ignoring the auto-generated file. Of course, by ignoring it, those changes are not included in the re-compiled project.
const webpack = require('webpack');
const AutoGenerate = require("./auto.plugin");
module.exports = {
configureWebpack: {
plugins: [
new webpack.WatchIgnorePlugin([/.*auto\.js/]),
new AutoGenerate()
]
}
}
I've also tried tapping into the compilation, and adding a new asset to the compilation. While the process does not error out, the generated asset is not a part of the final compilation.
// auto.plugin.js
class AutoGenerate {
static defaultOptions = {
outputFile: 'auto.js',
};
constructor(options = {}) {
this.options = { ...AutoGenerate.defaultOptions, ...options };
}
apply(compiler) {
compiler.hooks.thisCompilation.tap('AutoGenerate', (compilation) => {
const path = require("path")
const filePath = path.resolve(__dirname, `src/plugins/${this.options.outputFile}`)
const { RawSource } = require('webpack-sources')
const fileContent = new RawSource(generateFile())
compilation.emitAsset(
filePath,
fileContent
)
});
}
}
function generateFile() {
// generate file content & return as string
}
module.exports = { AutoGenerate };
// vue.config.js
const AutoGenerate = require("./auto.plugin");
module.exports = {
configureWebpack: {
plugins: [
new AutoGenerate()
]
}
}
How can I trigger my logic for auto-generating this file, while having this file be included as part of any re-compilation, while at the same time avoiding an infinite loop?
I have not been able to identify a direct solution to the problem posed above. However, for anyone reading, I've come to discover that this can be accomplished by utilizing a package called before-build-webpack, notably by including the watch-run trigger.
// vue.config.js
const WebpackBeforeBuildPlugin = require('before-build-webpack')
module.exports = {
configureWebpack: {
plugins: [
new WebpackBeforeBuildPlugin(function(stats, callback) {
// ...
}, ['run', 'watch-run'])
]
}
}
I don't even know how to explain my problem shortly in title. I want to create task which will follow these steps:
Take Sass File as a source (Ex. src/scss/main.scss)
Sort css properties with 'postcss-sorting'
Overwrite source file to same path (Ex. src/scss/main.scss)
Take sorted scss file and compile to css
Write to css folder (Ex. dist/css)
I try to write this task but when i start to watch scss file changes, task having infinite loop. I tried with 2 different tasks too (one for sort css properties and write file, other one for compile and write) it still looping. I don't want to sort only css properties in css file, i want to sort my scss file too. That is my example code:
// Load plugins
const {gulp, watch, src, dest, series} = require( 'gulp' ),
browserSync = require('browser-sync').create(),
postcss = require( 'gulp-postcss' ),
sortProperties = require( 'postcss-sorting' ),
sassParser = require( 'postcss-scss' ),
sass = require( 'gulp-sass' );
// Load CSS property orders for 'postcss-sorting'
const propertySortOrder = require('./propertySortOrder');
// Style
const style = () => {
return src('src/scss/**/*.scss')
.pipe(
postcss([sortProperties(propertySortOrder)], {
syntax: sassParser,
})
)
.pipe(dest('src/scss'))
.pipe(sass().on('error', sass.logError))
.pipe(dest('src/css'))
.pipe(browserSync.stream());
}
// Start Server
const startServer = (done) => {
browserSync.init({
server: { baseDir: './' },
injectChanges: true
});
done();
}
// Watch File Changes
const watchFileChanges = (done) => {
watch('src/scss/**/*.scss', style);
done();
}
exports.start = series(startServer, watchFileChanges);
Can anyone help me to fix this? Thanks
P.S. Sorry for my all grammatical mistakes, English is not my native language.
You can use gulp-changed, it will override the file only if there is a change, preventing the infinite loop:
const changed = require('gulp-changed');
const clone = require( 'gulp-clone' );
const merge = require('merge-stream');
// Style
const style = () => {
const sortedCssPipe = src('src/scss/**/*.scss')
.pipe(
postcss([sortProperties(propertySortOrder)], {
syntax: sassParser,
})
);
const scssPipe = sortedCssPipe
.pipe(clone())
.pipe(changed('src/scss', {hasChanged: changed.compareContents}))
.pipe(dest('src/scss'));
const cssPipe = sortedCssPipe
.pipe(sass().on('error', sass.logError))
.pipe(dest('src/css'))
.pipe(browserSync.stream());
return merge(scssPipe, cssPipe);
}
I have read the document of build library in VUE-CLI3.0.
My directory:
--src
--components
--componentA.vue
--componentB.vue
....
--componentZ.vue
--build
--libs.js
I want to run one command with my one entry "libs.js" (Maybe there is a loop to create multiple entries in libs.js) to bundle my components separately. The destination folder maybe like the following:
--dist
--componentA.css
--componentA.command.js
--componentA.umd.js
--componentA.umd.min.js
...
--componentZ.css
--componentZ.command.js
--componentZ.umd.js
--componentZ.umd.min.js
Can anyone give me some suggetions?
I add a script file. In which, I get the list of components and using 'child_process' to execute each command.
The following is an example:
lib.js
const { execSync } = require('child_process')
const glob = require('glob')
// console font color
const chalk = require('chalk')
// loading
const ora = require('ora')
// 获取所有的moduleList
const components = glob.sync('./src/components/*.vue')
// const buildFile = path.join(__dirname, 'build.js')
// const webpack = require('vuec')
const spinner = ora('Packaging the components...\n').start()
setTimeout(() => {
spinner.stop()
}, 2000)
for (const component of components) {
// const file = path.join(__dirname, module);
const name = component.substring(component.lastIndexOf('/') + 1).slice(0, -4)
const cmd = `vue build -t lib -n ${name} ${component} -d lib/components/${name}`
execSync(cmd)
console.log(chalk.blue(`Component ${name} is packaged.`))
}
console.log(`[${new Date()}]` + chalk.green('Compeleted !'))
What's more, add a script command in package.json:
"build-all": "node ./src/build/lib.js"
You just enter npm run build-all. That's all~