Develop Reference

Parcel Bundler beautify, lint, and create .min.js

I'm new the world of automating/testing/bunding with JS and I've got parcel setup for the most part but I noticed that when it builds files, it does not actually save them with the .min.js part in the file name. I'm wondering if theres a way to do this without having to rename the build file manually.
I'm also trying to find a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me
Here's what my package.json looks like
{
"name": "lpac",
"version": "1.3.1",
"description": "",
"dependencies": {},
"devDependencies": {
"parcel": "^2.0.0-rc.0"
},
"scripts": {
"watch": "parcel watch --no-hmr",
"build": "parcel build"
},
"targets": {
"lite-maps": {
"source": ["./path/file1.js", "./path/file2.js", "./path/file3.js"],
"distDir": "./path/build/"
}
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"outputFormat" : "global",
}
I checked out the docs but I couldn't find anything on linting or beautifying with parcel. How can i go about doing that? If you have tutorial links to doing so please also share because resources/tutorials seem scarce for anything other than the basic watching and building files

Unfortunately, there is no out-of-the-box setting that can cause parcel javascript output look like [fileName].[hash].min.js instead of [fileName].[hash].js. The .min.js extension is just a convention to keep output files distinct from source files, though - it has no effect at runtime - and the fact that parcel does automatic content hashing makes it easy enough to tell this. And even though they don't have a .min.js extension, these output files are definitely still minified and optimized by default.
However, if you really, really want this anyways, it's relatively simple to write a Namer plugin for parcel that adds .min.js to all javascript output:
Here's the code:
import { Namer } from "#parcel/plugin";
import path from "path";
export default new Namer({
name({ bundle }) {
if (bundle.type === "js") {
const filePath = bundle.getMainEntry()?.filePath;
if (filePath) {
let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath));
// See: https://parceljs.org/plugin-system/namer/#content-hashing
if (!bundle.needsStableName) {
baseNameWithoutExtension += "." + bundle.hashReference;
}
return `${baseNameWithoutExtension}.min.js`;
}
}
// Returning null means parcel will keep the name of non-js bundles the same.
return null;
},
});
Then, supposing the above code was published in a package called parcel-namer-js-min, you would add it to your parcel pipeline with this .parcelrc:
{
"extends": "#parcel/config-default",
"namers": ["parcel-namer-js-min", "..."]
}
Here is an example repo where this is working.
The answer to your second question (is there "a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me") is unfortunately, no.
However, parcel can work well side-by-side with other command line tools that do this do this. For example, I have most of my projects set up with a format command in the package.json, that looks like this:
{
...
"scripts": {
...
"format": "prettier --write src/**/* -u --no-error-on-unmatched-pattern"
}
...
{
You can easily make that command automatically run for git commits and pushes with husky.

Vue:Conflicting order. Following module has been added

when I build my program，somethin is happen;
How to fix it? I dont want to ignore this;
I google some question that tell me change the component order,but I check my code ,It doesnt work;
how to fix that?
And Has any can tell me What's the meaning of ",,,"。whats the different between "," and ",,," ?
Looking forward to the answer
Conflicting order. Following module has been added:
* css ./node_modules/_css-loader#3.6.0#css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/_vue-loader#15.9.7#vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader#3.0.0#postcss-loader
/src??ref--6-oneOf-1-2!./node_modules/_cache-loader#4.1.0#cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader#15.9.7#vue-loader/lib??vue-loader-options!./src/xmgl/contract/supplier/supplier_contract
_tab.vue?vue&type=style&index=0&id=72731489&scoped=true&lang=css&
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/_css-loader#3.6.0#css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/_vue-loader#15.9.7#vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_postcss-loader#3.0.0#postcss-loader
/src??ref--6-oneOf-1-2!./node_modules/_cache-loader#4.1.0#cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader#15.9.7#vue-loader/lib??vue-loader-options!./src/xmgl/common/vue/print_preview.vue?vue&ty
pe=style&index=0&id=0eed940e&scoped=true&lang=css&
- couldn't fulfill desired order of chunk group(s) , , ,
- while fulfilling desired order of chunk group(s) ,
warning

Result:
Component A and component B have different import order in different file, while component A and component B have same CSS style but different config. Plugin will be confused by a important feature 'Cascading' in CSS.
More explain can be find in here: https://www.py4u.net/discuss/1057823
Resolve:
ignore warning
Obviously, it is not a good idea. But I also will show how to config that.
You should find webpack.config.js and add some code in below
plugins: [
new MiniCssExtractPlugin({
// ......
ignoreOrder: true
}),
]
adjust the order of component
Tslint
If you are worked in a TS project, and your project has tslint, you can easily achieve it by code in below.
module.exports = {
// ...
"ordered-imports": [true, {
"import-sources-order": "case-insensitive",
"named-imports-order": "case-insensitive",
"grouped-imports": true,
"groups": [
{
"name": "react",
"match": "^react.*",
"order": 10
},
{
"name": "internal modules",
"match": "^#",
"order": 30
},
{
"name": "relative dir",
"match": "^[.]",
"order": 40
},
{
"name": "node_modules",
"match": ".*",
"order": 20
}
]
}]
}
Eslint
If you are worked in a js or vue project with eslint, you also can easily achieve it by a eslint plugin: eslint-plugin-simple-import-sort.
the first you need to do is install it.
npm install eslint-plugin-simple-import-sort -D
or
yarn add eslint-plugin-simple-import-sort -D
Then you should add it in your .eslintrc.js file(or other eslint config file)
module.exports = {
// ...
plugins: ["simple-import-sort"],
rules: {
// ...
"simple-import-sort/imports": "error",
}
}
Finally run eslint fix to auto fix import order.
example: npm run lint:fix
Last of the last, you are better to use husky and add npm run lint:fix in husky script, that will let eslint auto to adjust import order before you commit or push(depend you husky config)

Build System for typescript in sublime text 3 is not working

I have installed Sublime Text 3 and trying to create the build system for TypeScript. Below are the code I am using
{
"cmd": ["tsc","$file"],
"file_regex": "(.*\\.ts?)\\s\\(([0-9]+)\\,([0-9]+)\\)\\:\\s(...*?)$",
"selector": "source.ts",
"windows": {
"cmd": ["tsc.cmd", "$file"]
}
}
{
"cmd": ["tsc", "-d", "-m", "amd", "--sourcemap", "$file"],
"file_regex": "(.*\\.ts?)\\s\\(([0-9]+)\\,([0-9]+)\\)\\:\\s(...*?)$",
"selector": "source.ts",
"osx": {
"path": "/usr/local/bin:/opt/local/bin"
},
"windows": {
"cmd": ["tsc", "-d", "-m", "amd", "--sourcemap", "$file"]
}
}
Getting [WinError 2] The system cannot find the file specified.
I tried both the Build System unable to generate the Corresponding JavaScript file. Can anyone help me on this. Thanks in advance.

For anyone still trying to figure this out, this is all I needed. The thing that really got me was that I needed to use tsc.cmd instead of just tsc. The quiet:true just removes the [Finished in 1.6s] that always shows at the bottom of the output window.
TypeScript converts the file to javascript and then the javascript file has to be run so...
Make sure you've installed node js and node is in your path.
Make sure you've installed TypeScript with npm install -g typescript (the node package manager) and tsc is in your path.
{
"cmd": ["tsc.cmd", "$file_base_name.ts", "&&", "node", "$file_base_name.js"],
"selector": "source.ts, source.tsx",
"quiet": true
}

Failing to resolve dependency for Ext.ux

I am using ExtJS 6.2
I have the following line in my app.json:
"requires": [
"font-awesome",
"ux"
],
I am trying to create a simple text view using LiveSearchGrid.js, so I have the following in my app_name=md_registry folder md_registry/app/view/main/ListTest.js:
Ext.define('md_registry.view.main.ListTest', {
extend: 'Ext.ux.LiveSearchGridPanel',
//xtype: 'row-expander-grid',
//store: 'Patients',
xtype: 'mainlisttest',
requires: [
'md_registry.store.Patients',
'Ext.ux.LiveSearchGridPanel'
],
When I try doing a sencha app build, I get the following compiler error:
Failed to resolve dependency Ext.ux.LiveSearchGridPanel for file md_registry.view.main.ListTest
I have verified that this file exists in the path:
md_registry/ext/packages/ux/classic/src
From everything I've read, specifying the above requires in my app.json should be sufficient, but it's obviously not.

You are right now creating a universal app, but not using the correct folders for your code. You should definitely look into either creating a classic-only app, or a universal app with correct folder structure. If you want to make a universal app, but not now, you can compile only classic.

The solution was completely unobvious:
Had to comment this out from the "builds" profile in app.json:
"modern": {
"toolkit": "modern",
"theme": "theme-triton",
"sass": {
"generated": {
"var": "modern/sass/save.scss",
"src": "modern/sass/save"
}
}
}
I hope this helps someone!

Visual Studio Chutzpah Running test on different projects with AMD modules

I have two projects under a solution, one is my main web project, say MyProject and the other serves for testing purposes, say MyProject.Tests.
Solution
MyProject
MyProject.Tests
I want to have my JavaScript headless tests running to the second one.
On the first project, all the javascript files are under the Scripts directory, like so:
Scripts/
Common.js
Libs/
jquery/
jquery.js
requirejs/
require.js
At the test project, I have my chutzpah.json file on root.
MyProject.Tests
chutzpah.json
Tests/
Specs/
spec.js
The file has this configuration:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [ { "Path": "Tests/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": ["*Common.js"],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
But when I try to run the spec file I get an error.
Spec file:
define(["jquery"], function ($) {
//code here. Doesn't matter, the error is because of the jquery module
});
The error, is this:
Error: Error opening C:/Users/g.dyrrahitis/Documents/Visual Studio 2013/Projects/MySolution/MyProject.Tests/Scripts/Libs/jquery/jquery.js: The system cannot find the path specified.
The thing is that chutzpah tries to find my jquery module at the test project rather the main project, where it resides.
Why I'm getting this kind of behavior and how can I solve this please? I've been trying for hours to tackle this with no luck so far.
Note
*The names MySolution, MyProject, MyProject.Tests are used for clarity, rather than using the real names.

I've found it, the chutzpah file hadn't the right configuration options (as expected) for the test harness directory.
I needed the TestHarnessDirectory and TestHarnessLocationMode options to explicitly instruct it to look at my main project directory.
This now is the correct one:
{
"TestHarnessDirectory": "../MyProject",
"TestHarnessLocationMode": "Custom",
"TestHarnessReferenceMode": "AMD",
"Framework": "jasmine",
"Tests": [ { "Path": "JavaScript/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": [ "*Common.js" ],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
Just needed to tell chutzpah that the harness location mode is custom, in order to provide a directory for it, which is the root of my main project.
Beware for the right configuration paths then, you may end up struggling for hours like me to find a solution. And read the documentation thoroughly (which I hadn't done).