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)
Related
I am not sure how to organize my js code.
Our front end is customized to different customers. Majority of the base code is common across all customers. However there are cases where certain functionality is overridden for each customer.
For example if we have 2 functions Function1 and Function2.
Customer1 uses Function1 while Customer2 uses Function2. How can I make sure that when I build the code for Customer, Function2 will not be included in the bundle? And when I build the code for Customer2, then Function1 will not be included int he bundle?
The other option I have, and that I am trying to avoid, is to have a separate code repo for each customer.
I think what you need is Tree-Shaking in webpack.
Tree shaking can be a stubborn process depending on how the library you are using in your application is developed.
If you find that you are using a module that does not shake dead code properly, you can always use the babel-plugin-import plugin. This plugin will build your bundle with only the code you import and nothing else. Here is an example of my babel 7.x config file. I use it to remove a lot of code that was not being tree-shaken by webpack from material-ui.
{
"presets": [
"#babel/preset-typescript",
"#babel/preset-react"
],
"plugins": [
[
"babel-plugin-import",
{
"libraryName": "#material-ui/core",
"libraryDirectory": "/",
"camel2DashComponentName": false
},
"core"
],
[
"babel-plugin-import",
{
"libraryName": "#material-ui/icons",
"libraryDirectory": "/",
"camel2DashComponentName": false
},
"icons"
]
]
}
When using this plugin in certain libraries, some of your imports also may break and you may need to import certain things on their own. I had to do this with material-ui's makeStyles function.
Feel free to remove what is unnecessary to you and keep the parts that help :).
At webpack configuration, optimization/usedExports: true will remove unused code.
webpack.config.js
module.exports = [
{
entry: "./main.js",
output: {
filename: "output.js"
},
optimization: {
usedExports: true, // <- remove unused function
}
},
{
entry: "./main.js",
output: {
filename: "without.js"
},
optimization: {
usedExports: false, // <- no remove unused function
}
}
];
lib.js
exports.usedFunction = () => {
return 0;
};
exports.unusedFunction = () =>{
return 1;
};
main.js
// Not working
// const lib = require("./lib");
// const usedFunction = lib.usedFunction;
// Working
const usedFunction = require("./lib").usedFunction;
usedFunction()
```shell
$ webpack
Generated Output file:
dist/output.js
(()=>{var r={451:(r,t)=>{t.W=()=>0}},t={};(0,function e(o){var n=t[o];if(void 0!==n)return n.exports;var p=t[o]={exports:{}};return r[o](p,p.exports,e),p.exports}(451).W)()})();
dist/without.js
(()=>{var n={451:(n,r)=>{r.usedFunction=()=>0,r.unusedFunction=()=>1}},r={};(0,function t(u){var e=r[u];if(void 0!==e)return e.exports;var o=r[u]={exports:{}};return n[u](o,o.exports,t),o.exports}(451).usedFunction)()})();
^^^^^^^^^^^
I have a lerna monorepo containing lots of packages.
I'm trying to achieve the following:
Ensure that VSCode provides the correct import suggestions (based on package names, not on relative paths) from one package to another.
Ensure that I can 'Open Definition' of one of these imports and be taken to the src of that file.
For 1. I mean that if I am navigating code within package-a and I start to type a function exported by package-b, I get a suggestion that will trigger the adding of an import: `import { example } from 'package-b'.
For 2. I mean that if I alt/click on the name of a function exported by 'package-b' while navigating the file from a different package that has imported it, I am taken to '/packages/namespace/package/b/src/file-that-contains-function.js',
My (lerna) monorepo is structured as standard, for example here is a 'components' package that is published as #namespace/components.
- packages
- components
- package.json
- node_modules
- src
- index.js
- components
- Button
- index.js
- Button.js
- es
- index.js
- components
- Button
- index.js
- Button.js
Note that each component is represented by a directory so that it can contain other components if necessary. In this example, packages/components/index exports Button as a named export. Files are transpiled to the package's /es/ directory.
By default, VSCode provides autosuggestions for imports, but it is confused by this structure and, for if a different package in the monorepo needs to use Button for example, will autosuggest all of the following import paths:
packages/components/src/index.js
packages/components/src/Button/index.js
packages/components/src/Button/Button.js
packages/components/es/index.js
packages/components/es/Button/index.js
packages/components/es/Button/Button.js
However none of these are the appropriate, because they will be rendered as relative paths from the importing file to the imported file. In this case, the following import is the correct import:
import { Button } from '#namespace/components'
Adding excludes to the project's jsconfig.json has no effect on the suggested paths, and doesn't even remove the suggestions at /es/*:
{
"compilerOptions": {
"target": "es6",
},
"exclude": [
"**/dist/*",
"**/coverage/*",
"**/lib/*",
"**/public/*",
"**/es/*"
]
}
Explicitly adding paths using the "compilerOptions" also fails to set up the correct relationship between the files:
{
"compilerOptions": {
"target": "es6",
"baseUrl": ".",
"paths": {
"#namespace/components/*": [
"./packages/namespace-components/src/*.js"
]
}
},
}
At present Cmd/Clicking on an import from a different package fails to open anything (no definition is found).
How should I configure VSCode so that:
VSCode autosuggests imports from other packages in the monorepo using the namespaced package as the import value.
Using 'Open Definition' takes me to the src of that file.
As requested, I have a single babel config in the root:
const { extendBabelConfig } = require(`./packages/example/src`)
const config = extendBabelConfig({
// Allow local .babelrc.js files to be loaded first as overrides
babelrcRoots: [`packages/*`],
})
module.exports = config
Which extends:
const presets = [
[
`#babel/preset-env`,
{
loose: true,
modules: false,
useBuiltIns: `entry`,
shippedProposals: true,
targets: {
browsers: [`>0.25%`, `not dead`],
},
},
],
[
`#babel/preset-react`,
{
useBuiltIns: true,
modules: false,
pragma: `React.createElement`,
},
],
]
const plugins = [
`#babel/plugin-transform-object-assign`,
[
`babel-plugin-styled-components`,
{
displayName: true,
},
],
[
`#babel/plugin-proposal-class-properties`,
{
loose: true,
},
],
`#babel/plugin-syntax-dynamic-import`,
[
`#babel/plugin-transform-runtime`,
{
helpers: true,
regenerator: true,
},
],
]
// By default we build without transpiling modules so that Webpack can perform
// tree shaking. However Jest cannot handle ES6 imports becuase it runs on
// babel, so we need to transpile imports when running with jest.
if (process.env.UNDER_TEST === `1`) {
// eslint-disable-next-line no-console
console.log(`Running under test, so transpiling imports`)
plugins.push(`#babel/plugin-transform-modules-commonjs`)
}
const config = {
presets,
plugins,
}
module.exports = config
In your case, I would make use of lerna in combination with yarn workspaces.
When running yarn install, all your packages are linked under your #namespace in a global node_modules folder. With that, you get IntelliSense.
I've set up an example repository here: https://github.com/flolude/stackoverflow-lerna-monorepo-vscode-intellisense
You just need to add "useWorkspaces": "true" to your lerna.json
lerna.json
{
"packages": ["packages/*"],
"version": "0.0.0",
"useWorkspaces": "true"
}
And the rest is just propper naming:
global package.json
{
"name": "namespace",
// ...
}
package.json of your component package
{
"name": "#namespace/components",
"main": "src/index.js",
// ...
}
package.json of the package that imports the components
{
"name": "#namespace/components",
"main": "src/index.js",
"dependencies": {
"#namespace/components":"0.0.0"
}
// ...
}
Then you can do the following:
import { Component1 } from '#namespace/components';
// your logic
Automatically Importing from #namespace
Unfortunately, I couldn't find a way to make this work in VSCode with a Javascript Monorepo. But there are some things you can do:
Use Typescript (tutorial, other tutorial)
Use module-alias
Add import {} from '#namespace/components' to the top of your file
Use Auto Import Extension
Edit: This is broken with the latest version of VSCode.
I finally managed to get this working reliably. You need to create a separate jsconfig.js for every package in your monorepo, for example:
{monorepo root}/packages/some-package/jsconfig.json:
{
"compilerOptions": {
"target": "es6",
"jsx": "preserve",
"module": "commonjs"
},
"include": ["src/**/*.js"],
"exclude": ["src/index.js"]
}
Note that I've excluded the src/index.js file so it doesn't get offered as an import suggestion from within that package.
This setup appears to achieve:
Intellisense import suggestions from packages instead of using relative paths.
Go to definition to source of other packages in the monorepo.
VSCode has been pretty flaky of late, but it seems to be working.
Note this is working for a JavaScript-only monorepo (not Typescript).
I am trying to build a project using JSDoc-3.5.5. I am currently trying to run a test for errors using a small sample of the files for the project. I manually included a few files in my conf.json file but when I run the test the terminal tells me "there are no input files to process." My conf.json file is shown below. If anyone can help me get this to run I would be very appreciative.
{
"tags": {
"allowUnknownTags": true
},
"recurseDepth": 10,
"source": {
"include": [
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics/isl_analytics_module.c",
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics/isl_analytics_module.h",
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics/isl_calculator.c",
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics/isl_calculator.h",
"/home/cordonem/bitbucket/workdir/src/isl/primitives/analytics"
],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": [
"/home/cordonem/jsdoc-3.5.5/plugins/commentsOnly"
],
"templates": {
"cleverLinks": false,
"monospaceLinks": false,
"default": {
"outputSourceFiles": true
}
}
}
Also, as a side note, if anyone knows how to make JSDoc stop trying to read the Makefile that would be very helpful information as well, as the Makefile throws errors when I try to run the full project.
you forgot to add the input files that should be processed by jsdoc. Here is how i did this in my project through CLI:
I ran this commands from my project's root.
./node_modules/.bin/jsdoc ./src/app/ -r -c ./node_modules/jsdoc/conf.json.EXAMPLE
which is same as shown in here, please read the linked document to understand the meaning of everything.
conf.json is same as conf.json.EXAMPLE
I have researched for a few hours. build a prototype myself and found that the webpack is working on its resolving alias but eslint kept reporting unable to resolve, EVEN after I jammed in setting supposedly resolve this issue.
Anyone know why adding
"settings": {
"import/resolver": {
"alias": [
[ "mycomponents", "./app/components" ]
]
}
}
to .eslintrc
and add two packages related to it won't do it?
to see what I did check this repo diff link: https://github.com/KleoPetroff/react-webpack-boilerplate/compare/master...adamchenwei:master
Note: i could have just hide the eslint error, but that's just a hack route which I would rather not to take, if there is a proper setup.
Thanks
Try adding eslint-import-resolver-alias to your project:
npm i eslint-import-resolver-alias --save-dev
Then update your .eslintrc file as follows:
"settings": {
"import/resolver": {
"alias": {
map: [
[ "mycomponents", "./app/components" ]
]
}
}
}
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).