I'm am using system.js to load my react app and I can't load react-select (library) because the files that reside in the /dist directory do not match the format that system.js can work with:
The formats I need are of type:
.js (Javascript file)
UMD.js (Universal Module Definition)
The file formats provided by the react-select library:
CJS.js (CommonJS)
ESM.js (ES Modules)
*react-select up to version 2.4.4 provided the file types .js and UMD.js, however I cannot use this version in my react app.
Is there a way to get .js or UMD.js files of the react-select library latest version (5.4.4)?
Related
I have a program with multiple .vue files in src/components. These use typescript and sass. The program uses webpack for compilation and bundling. I would like to add all these components to a single npm package to be used as a library with the following restrictions:
It should be compiled down to javascript and css so whoever imports my library doesn't need my compile dependencies and webpack configuration
The components depend on typescript files. These should also be compiled, but not bundled. They are valid entry points for the library.
The import for the users of the library should be as painless as possible. It would be optimal if the generated js and css could be loaded in a single import, just like importing a .vue file
Is this possible to do? And if so, how? If not, how could I best approximate this or what are my alternatives?
I have tried to use vue-cli-service build --target lib but it seems that can only handle one component, bundles the ts files, and I'm not sure if it behaves like I expect when you import a file.
How can i add new css and js file in my BC Stencil Theme ?
and i cant find my all theme folder in cyberduck! my theme name is Cornerstone Light.
The legacy theme platform (Blueprint) used Cyberduck to upload theme files, but Stencil uses Stencil CLI developer tools. If your store has a Stencil theme applied, you won't see a template folder in WebDAV.
First, install the prerequisites for your OS and install Stencil CLI:
https://stencil.bigcommerce.com/docs/installing-and-launching-stencil-1
Download your theme so you can work on it locally. CSS files can be added to assets/scss and js files can be installed with a package manager like npm, or uploaded to assets/js.
After uploading your custom.scss file to the assets/scss directory, you can import it into the default scss file (theme.scss) with an #import statement:
#import "custom";
Here are links to the documentation on adding CSS and js files to your theme:
https://stencil.bigcommerce.com/docs/custom-sass-functions#Compiling
https://stencil.bigcommerce.com/docs/js-101
You might also find this BC Community discussion helpful:
https://forum.bigcommerce.com/s/question/0D51B00003sRDg7SAG/custom-css-in-big-commerce
When I download a package in bower or npm, many irrelevant/not-useful files also
get included especially in npm packages. I generally only include .css or .js files of that package for e.g. in bootstrap e.t.c. But for package like polymer or Anjular.js or Electron we need multiple other file too. So when I deploy my project should I include the complete folder or just copy the required files separately or is there any other approach ?
When you deploy to your production server, a good approach would be to only include the files you are actually using. You should also create an optimized file to serve to the client.
To achieve that, you normally have a deploy script that generates one or more minified .css or .js files (for example, vendor.js for libraries and bundle.js for your code).
This script can be build with tools like grunt, gulp or you can use a module bundler like Webpack or Jspm.
You can create your own Grunt or Gulp script like the ones in this website.
When using a module bundler and modern javascript to organize your code, you'll build, for example, an entry javascript file (bundle.js) that will look like
import {MyLibrary} from 'my-library';
import {AnOtherLibrary} from 'an-other-library';
console.log(MyLibrary.saySomething());
In this case, Webpack handles the node_modules imports and the creation / minification / concatenation of the production version of .js files.
As you said, there are multiple files to be included (js, css or even fonts) so configuring your scripts may take some time. Try finding a Yeoman generator that uses your frameworks, and use the deploy scripts others already created for this purpose. This one uses AngularJS, Bower and Grunt. This one uses Webpack and ReactJS.
I would like to know how to change the default index.html file. I have created a classic project (for mobile web). In that I have created a .css file which includes my custom styles. Now I would like to include this file in index.html, so that those styles will apply on my application. But haven't seen the index.html file. After build, I am able to see this file in build folder. May I know how to update the index.html file?
Thanks in Advance,
Swathi.
Appcelerator uses XML for views, TSS for styling, and JS for controllers. Then Titanium compiles your source code into the native API (HTML for mobile web). Because you can also compile for iOS, Android, and Windows, your output is converted appropriately to your build directory. When you create a new Alloy project, you will find the default index.xml, index.tss, and index.js in the app views, styles, and controllers directories respectively. So to control index.html, edit these 3 index.* files.
I'm trying to create a dojo build file. What do I need to add in the profile.js file to include all the .css files inside the dojo build.js file. I'm getting dijit.js and other .js files, but the dependent .css files are not getting built into the build.js file
I'm using dojo 1.8
It doesn't really make sense to ask to combine JS and CSS into a single file. JavaScript is JavaScript; CSS is CSS.
That said, you should be able to get down to as little as one CSS request by specifying cssOptimize: 'comments' in your build profile, which will strip comments from CSS files within packages the build processes, and flatten imports. As a result, each Dijit theme's main CSS file (e.g. themes/claro/claro.css) will then require only one request, rather than requests for each component.