This question already has answers here:
How to set environment variables from within package.json?
(21 answers)
Closed 4 years ago.
In my package.json I have the following script:
"scripts": {
"run-trader": "app='member' webpack-dev-server --config ./config/webpack.dev.js "
}
What I achieved with this was that the app variable was passed down as an environment variable to the webpack file, so then inside the file I could do
var app = process.env.app
and get the value member.
Now this doesn't seem to work on windows using the same node and npm version as OSX.
The error that I get is the following:
> app='member' webpack-dev-server --config ./config/webpack.dev.js
npm : 'app' is not recognized as an internal or external command,
At line:1 char:1
+ npm run-script run-member
+ ~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : NotSpecified: ('app' is not re...ternal command,:String) [], RemoteException
+ FullyQualifiedErrorId : NativeCommandError
Does anyone know how to fix this? It looks like it is trying to run a script called app.
Note: I have other scripts very similar to this one and they all work on OSX but they don't on windows; the difference is the appname.
I think cross-env this lib would help you.
Change your script:
cross-env app=member webpack-dev-server --config ./config/webpack.dev.js
It should work.
Related
I am getting below error from next js app suddenly. Any solution to fix that problem?
./pages/_app.tsx
Error: [BABEL] C:\Projects\skribeNew\app-web\pages\_app.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type
at verify (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1910:397612)
at Function.explode (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1910:396515)
at C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1:49254
at Generator.next (<anonymous>)
at Function.<anonymous> (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1:79767)
at Generator.next (<anonymous>)
at evaluateSync (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1910:717268)
at Function.sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1910:715284)
at sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1:80263)
at sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1910:716601)
I changed the babel types version to previous one, But it did not work.
It was because of an incompatible version issue for the npm package "#babel/plugin-transform-typescript". I fixed to the correct previous
version in package.json file. Now it's working fine. Below is the code -
"devDependencies": {
"#babel/plugin-transform-typescript": "7.19.3",
}
"resolutions": {
"#babel/plugin-transform-typescript": "7.19.3"
}
npm i --save --legacy-peer-deps
I believe I was having the same issue you are currently experiencing not too long ago. My solution came from reorganizing the path that my node files were installed. I installed my node files to a greater hierarchy in the path then created a new folder down the line to hold my project files so that the files were already somewhere in the path. Alternatively, you could try installing globally with npm install -g yarn
Hope this helps! :)
Tools used:
Visual Code Studio (1.39.2)
Node JS (13.0.1)
NPM (6.12.0)
CKEditor 5 (15.0.0)
Mozilla Firefox (69.0.3 32-bits)
Intro
I am learning how to use CKEditor 5 and how to add and create plugins. I have been successful in adding a existing and oficial plugin by following this tutorial:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build
It is said there are two ways to add plugins in CKEditor 5. Basically, you can use a ready-made builds and add plugins to them, or you can change the editor creation settings.
The advantage of modify a build is that you no longer need to configure anything whenever a CKEditor instance is created, since everything has already been built with the desired settings. Also, the client app does not need to do a new distribution with, for instance, Webpack, importing code.
How I did the process
I do not use Git/GitHub in my development process, so I downloaded the ckeditor5-build-classic zip file from this Git repository, and I moved the inside contents to a desired folder. Using visual studio code, I opened the folder as a project, and started to manipulate it following the same procedures described in the mentioned tutorial:
npm install
Then:
npm install --save-dev #ckeditor/ckeditor5-alignment
I made the same modifications to the src/ckeditor.js source code, and finally created the build with the following command:
npm run build
With the build created, I put all 3 resulting files (ckeditor.js, ckeditor.js.map and translations folder) together with a index.html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="ckeditor.js"></script>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="editor-container">
<div id="editor">CKEditor content.</div>
</div>
</body>
</html>
My directory structure:
Test App+
|---index.html
|---app.js
|---jquery-3.4.1.min.js
|---ckeditor.js
|---ckeditor.js.map
|---translations (folder)
|---styles.css
Here is my app.js:
$( document ).ready(function() {
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
console.log('CKEditor is ready.');
})
.catch(error => {
console.error('Error: ' + error);
});
});
When I open index.html, CKEditor 5 works wonderfully and includes the added plugin.
Creating my own plugin (the problem)
Installing a plugin this way is very easy and practical, so I tried to create my own plugin and perform the same process to install it. To do this, I've been following directions from:
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-a-block-widget.html
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html
https://github.com/ckeditor/ckeditor5-alignment
My project meets this structure:
MyPlugin+
|---package.json
|---package-lock.json
|---src+
|---|---myplugin.js
|---|---myplugin_ui.js
|---|---myplugin_editing.js
|---node_modules+
|---|---lodash-es (folder)
|---|---ckeditor5 (folder)
|---|---#ckeditor (folder)
package.json:
{
"name": "myplugin",
"version": "1.0.0",
"description": "My first CKEditor 5 plugin project.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "RDS",
"license": "ISC",
"dependencies": {
"#ckeditor/ckeditor5-core": "^15.0.0",
"#ckeditor/ckeditor5-ui": "^15.0.0"
}
}
myplugin.js:
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
import MyPlugin_ui from './myplugin_ui';
import MyPlugin_editing from './myplugin_editing';
export default class MyPlugin extends Plugin
{
static get requires()
{
return [MyPlugin_editing , MyPlugin_ui];
}
}
myplugin_ui.js:
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
export default class MyPlugin_ui extends Plugin
{
init()
{
console.log('MyPlugin_ui#init() has been called.');
}
}
myplugin_editing.js:
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
export default class MyPlugin_editing extends Plugin
{
init()
{
console.log('MyPlugin_editing#init() has been called.');
}
}
When I install the plugin in the CKEditor 5 project the build is successfully created. However, when testing the editor the browser shows the following problem:
ckeditor-duplicated-modules
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
In the link shown it is said:
Therefore, you must never add plugins to an existing build unless your
plugin has no dependencies.
But at the same time, the opposite seems to be taught on the tutorial page:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html#adding-a-plugin-to-a-build
I don't have much experience using Node JS or npm. I'm sure I have some misconfiguration in my project, but I don't know where. I believe it could be in my package.json file.
What I have tried
Delete node_modules and package-lock.json files from plugin project.
Consequences:
When building the CKEditor build with installed plugin, Webpack says:
ERROR in ../MyPlugin/src/myplugin.js
Module not found: Error: Can't resolve '#ckeditor/ckeditor5-core/src/plugin' in 'C:\Users\RDS\Desktop\CKEditor\MyPlugin\src'
# ../MyPlugin/src/myplugin.js 1:0-57 5:38-44
# ./src/ckeditor.js
ERROR in ../MyPlugin/src/myplugin_editing.js
Module not found: Error: Can't resolve '#ckeditor/ckeditor5-core/src/plugin' in 'C:\Users\RDS\Desktop\CKEditor\MyPlugin\src'
# ../MyPlugin/src/myplugin_editing.js 1:0-57 3:46-52
# ../MyPlugin/src/myplugin.js
# ./src/ckeditor.js
ERROR in ../MyPlugin/src/myplugin_ui.js
Module not found: Error: Can't resolve '#ckeditor/ckeditor5-core/src/plugin' in 'C:\Users\RDS\Desktop\CKEditor\MyPlugin\src'
# ../MyPlugin/src/myplugin_ui.js 1:0-57 3:41-47
# ../MyPlugin/src/myplugin.js
# ./src/ckeditor.js
ERROR in chunk main [entry]
ckeditor.js
C:\Users\RDS\Desktop\CKEditor\ckeditor5-build-classic-master\src\ckeditor.js 15684830ec81692702e020bf47ce4f65
Unexpected token (4:26)
|
|
| class MyPlugin_ui extends !(function webpackMissingModule() { var e = new Error("Cannot find module '#ckeditor/ckeditor5-core/src/plugin'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())
| {
| init()
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! #ckeditor/ckeditor5-build-classic#15.0.0 build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the #ckeditor/ckeditor5-build-classic#15.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\RDS\AppData\Roaming\npm-cache\_logs\2019-11-01T12_40_26_177Z-debug.log
Change the dependencies between the dependencies and devDependencies properties set within package.json.
Consequences: The same things happen.
All CKEditor 5 project dependencies are set on devDependencies in package.json. The installation of my plugin in the CKEditor 5 project has already been done by two existing modes:
npm link
package.json file as dependency
And again the same problems are shown. Ah! Also, something strange happened. I have already said that I properly performed the installation of the CKeditor 5 alignment plugin. I have even shown how this was done. After all this problem, I tried to install the alignment plugin locally. I downloaded it from repository, and I did the same installation via link and also file. With this approach, the plugin mysteriously gave me ckeditor-duplicated-modules problem, as previously mentioned.
I don't know exactly how it would be the right way to install this plugin from CKEditor 5 itself locally without having to download it from the internet (with npm install <module name> from npm repository). I am well aware that I am doing something wrong, but I cannot identify what it is. I would appreciate if anyone could give me tips, alternatives, and of course, maybe a solution. I've been trying for a few days now, and I don't know what I can and can't do anymore. I would be really grateful if someone could help me.
Having been unsuccessful in finding a solution here, I learned that I could ask for help in the ckeditor git repository. Please follow the following address for a resolution:
https://github.com/ckeditor/ckeditor5/issues/5699
Maybe it is just wording, but you shouldn't have to "install" your custom plugin. Simply add your plugin info to the \src\ckeditor.js file (the import, the builtinPlugins[], the toolbar [] etc). Then do npm run build and it will include it in the \build\ckeditor.js
You would do follow the same steps in changing the \src\ckeditor.js as you did for the alignment plugin except you reference your local plugin. Just make sure the names of your custom plugin match.
Since you have no UI toolbar code I think all you would need is the import and an entry in the ClassicEditor.builtInPlugins = [..., MyPlugin]
That should be enough to test init
I am minifying multiple files in a folder using uglifyjs-folder in npm package.json like :
"uglifyjs": "uglifyjs-folder js -eyo build/js"
It is working as intended & minify all files in folder.
I want to remove any console.log & alert while minify but not able to find any option with uglifyjs-folderhttps://www.npmjs.com/package/uglifyjs-folder
Please help.
Short Answer
Unfortunately, uglifyjs-folder does not provide an option to silence the logs.
Solution
You could consider writing a nodejs utility script which utilizes shelljs to:
Invoke the uglifyjs-folder command via the shelljs exec() method.
Prevent logging to console by utilizing the exec() methods silent option.
The following steps further explain how this can be achieved:
Install
Firstly, cd to your project directory and install/add shelljs by running:
npm i -D shelljs
node script
Create a nodejs utility script as follows. Lets name the file: run-uglifyjs-silently.js.
var path = require('path');
var shell = require('shelljs');
var uglifyjsPath = path.normalize('./node_modules/.bin/uglifyjs-folder');
shell.exec(uglifyjsPath + ' js -eyo build/js', { silent: true });
Note: We execute uglifyjs-folder directly from the local ./node_modules/.bin/ directory and utilize path.normalize() for cross-platform purposes.
package.json
Configure the uglifyjs script inside package.json as follows:
{
...
"scripts": {
"uglifyjs": "node run-uglifyjs-silently"
...
},
...
}
Running
Run the script as per normal via the command line. For example:
npm run uglifyjs
Or, for less logging to the console, add the npm run --silent or shorthand equivalent -s option/flag. For example:
npm run uglifyjs -s
Notes:
The example gist above assumes that run-uglifyjs-silently.js is saved at the top-level of your project directory, (i.e. Where package.json resides).
Tip: You could always store run-uglifyjs-silently.js in a hidden directory named .scripts at the top level of your project directory. In which case you'll need to redefine your script in package.json as follows:
{
...
"scripts": {
"uglifyjs": "node .scripts/run-uglifyjs-silently"
...
},
...
}
uglify-folder (in 2021, now?) supports passing in terser configs like so:
$ uglify-folder --config-file uglifyjs.config.json ...other options...
and with uglifyjs.config.json:
{
"compress": {
"drop_console": true
}
}
And all options available here from the API reference.
I previously asked (and got a great answer for) this question: named parameter to npm run script
As mentioned in 1 of the comments to the correct answer, the $npm_config_variable does not work on windows. I'm looking for a cross platform way to run this script as npm run say-hello --greeting='hello'.
Is there any way to check for the OS in npm scripts and use %% instead of $?
Use minimist library. Its realy easy to access command line params with it and it works in every environment.
var argv = require('minimist')(process.argv.slice(2));
var param = argv.param;
// package.json snippet
"scripts": {
"start": "app --param=value"
}
I'm wondering how is it possible to transform the TypeScript into JavaScript in a cross platform manner. I'm aware about availability of node package manager for typescript, but are there any other alternatives which can be used on the server side?
The TypeScript compiler is built in TypeScript, and hence is available as a JS file (tsc.js) that can be run using just about any ES3-compiliant VM or JS implementation.
That said, the compiler's current file I/O infrastructure only supports Node and Windows Scripting Host file APIs. If you'd like to recommend for support for another environment, feel free to reach out to the team at our GitHub site (Formerly CodePlex)
Short version: use Node if you can. It's becoming unavoidable nowadays.
Maybe it's not the answer you want, but as everybody mentioned, the compiler is a JS file, so, your options are the options of executing a JS file.
In Windows, there are 2 obvious ones, Node, and Windows Script Host.
You know about node already, the other option is a component that comes with all versions of Windows (I think), you can do it like this:
cscript path/to/tsc.js source-file.ts
You can see all compiler options by just:
cscript path/to/tsc.js
On Linux I assume you should be able to use (in addition to node):
V8 standalone shell, replace node or cscript with v8-shell
ExecJS https://github.com/sstephenson/execjs
Any other JS runner available on the selected platform (another answer mentioned Rhino for example)
Update: Another answer suggests the compiler API is only compatible with node and Windows Script Host (cscript tool), so, if correct, then on Linux you'll need Node to compile TypeScript.
If you are looking for something like apt get tsc (or whatever the Linux/Mac package managers are like), I think there isn't.
I remember reading somewhere that the I/O is optimized for Node and Windows Script Host, so, if you have problems with options, you'll probably end up with Node if seeking platform independence.
Update: Another answer here confirms the same about compatibility.
Concretely, on the server (assuming your server has Node.js available), you'd simply run:
node path/to/tsc.js yourFile1.ts yourFile2.ts [etc]
You can run that command without any input filenames to see the command-line help for tsc.js.
From the command line you can use ts-node:
npm install ts-node
Then call the command like this:
tsc file.ts --outFile file.js
I have a project which compiles Typescript to Javascript in Java:
https://github.com/martypitt/typescript4j
As discussed in other answers, this makes use of Rhino, so has no dependencies on npm or node.
Here's an example:
// Instantiate the compiler:
TypescriptCompiler compiler = new TypescriptCompiler();
// Compile a string:
String output = compiler.compile("class Greeter { greeting: string; }");
// Or, compile and output to a file:
compiler.compile(new File("example.ts"), new File('output.js'));
I use it in another project - 'Bakehouse' to perform on-the-fly compilation of typescript resources within Spring environments
If it's Java that you need to target then you could run tsc.js with the Rhino engine as part of your build process.
To compile ts -> js: node is available for all common platforms, so I fail to see why you'd want to have a tsc.java when you already have a tsc.js. Installing node is no big deal. In fact, it's easier than Java.
Once you have your proj.js file, you can then copy it to which ever deployment platform you wish to use.
From my point of view, JavaScript - or more accurately ECMAScript is an alternative to Java. So I'm happy that I don't have to wrangle JVM etc to use the tool. But if you prefer Java, then why even bother with JS?
SublimeText2 Trick
You can transpile typescript to javascript directly from SublimeText2 (you need node) :
Create a Typescript.sublime-build file in /Sublime Text 2/Packages/User with this content :
{
"cmd": ["tsc", "$file"],
"selector" : "source.ts",
"path": "/usr/local/bin:$PATH"
}
then, now, you can transpile your code with ctrl+B or cmd+B
I've been playing around with this, and can compile TypeScript with javascript with the following code:
<script src=typescript.js></script>
<script>
var scriptText = ""
+ "/// <reference path=\"test.ts\"/>" + "\r\n"
+ "class Car {"
+ " constructor (private name: string) { } "
+ " getName() { "
+ " var juice = new Juice();"
+ " return name; "
+ " } "
+ "} "
+ "var car = new Car('Subaru Impreza');"
+ "console.log(car.getName());";
var TextWriter = function () { };
TextWriter.prototype = {
collected: '',
Write: function (sc) {
this.collected += sc;
},
WriteLine: function(sc) {
this.collected += sc + '\n';
},
toString: function() {
return this.collected;
}
};
var output = new TextWriter();
var tsc = new TypeScript.TypeScriptCompiler(output);
var script = tsc.addUnit(scriptText, "");
tsc.emit();
console.log(output.toString());
</script>
It's not exactly ideal though. I'm trying to get something running so I can convert TypeScript to JS within C# (using Javascript .NET), but i'm getting a stack overflow on the ts.addUnit call.
You probably don't wanna use ts-node, because it is slow, instead follow following steps for fast .ts files compilation (Make sure node is installed):
npm i -D #types/node typescript nodemon
npx tsconfig.json and select node from the list. You are free to modify it as per your needs.
Create a file names src/index.ts in your project root.
Then in your package.json, add the following 2 scripts:
"scripts": { "watch": "tsc -w", "dev": "nodemon dist/index.js" },
Then use:
npm run watch
npm run dev
And, it will automatically look for changes in .ts files and you can see the compiled file output in the terminal as you go!
This is what worked for me:
First, installed the typescript node module >> npm install -g typescript. This gives a command line utility tsc.
Next, tsc gulpfile.ts gulp-config.ts typings/tsd.d.ts
this will transpile the gulpfile.ts and gulp-config.ts files to gulpfile.js and gulp-config.js. We supply the typings/tsd.d.ts file as reference for correct transpilation.
The typescript node module covers many options >> tsc -h to specify output directory or file, etc..
If you are using "firebase -tool" you can use
npm run build
inside your functions directory.