I have a multi-file project, with ES6 style exports and imports.
I'm using Brunch to concatenate these files into 1 main.js file that will serve as the main for an NPM package.
To specify the API of my package, I need to have exports in main.js. But when Brunch concatenates my js files, I am worried that (1) exports that are meant for internal imports and (2) exports meant for my API will both look the same.
Looking at the generated main.js file it seems like the exports I write in my source code get wrapped into modules, but none of these are top-level exports like the ones needed for NPM packages.
How can I let NPM distinguish between these two types of exports? Specifically, how can I have exports in the main.js file generated by Brunch concatenation?
Brunch is not designed for writing libraries, but rather for building apps.
I don't need to concatenate files at all to publish them to NPM, so instead I have used Babel with React and ES6 presets to transform my ES6 .jsx files to ES5 .js files.
I then make one file (eg. main.js) where I export my library and set that as the main in package.json.
I can then use Brunch to create an app with the React skeleton (brunch new -s brunch/with-react), npm install <my-package>, and import my library within my app.
Related
Since version 4.x of SonataAdminBundle all assets are handled using NPM and WebPack.
In my project I also have some assets and JS libraries and I'm also using NPM and WebPack.
What should I do in this case? For example, SonataAdminBundle uses libraries such as jQuery, Bootstrap, but I also use them (in my package.json).
One of the ideas that came to my mind is to import the main "app.js" file (vendor/sonata-project/admin-bundle/assets/js/app.js) from SonataAdminBundle which contains all the required components to run to my main "app.js" file and then import my other additional libraries and assets. Next, I would then copy all the dependencies from the SonataAdminBundle package.json file (vendor/sonata-project/admin-bundle/package.json) and paste it into my package.json file.
I am not sure if this approach is correct.
The downside of this solution would be to compare the package.json files after each update of the SonataAdminBundle library and apply any changes.
Do you have other ideas to solve this problem?
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.
I would like to create a npm repo containing a folder with Vue single file components from which I can import then easily:
import { Button } from "#user/design-system"
the problem I have is that the Button.vue contains variables coming from a global .scss file that is handled by Webpack.
How can I bake the variables into each component when I build for the npm release?
So essentially I want a dev environment which I run by npm run serve and I want a npm run build which copies all components and bakes the CSS variables into it to have stand-alone components.
You should have this variables in a dedicated file (for example _variables.scss), in your project where you want to import your component. Then you should make this variables accessible to all the components. I suggest you to use style-resouces-loader, that will import your variable in every component. Vue ClI wrapper - vue-cli-plugin-style-resources-loader.
To export your UI library with already inlined CSS, you should build your UI library through vue-cli-service build. And then you can import your builded component with builded CSS styles, which was built from SCSS.
How can a .vue file (as a parent component with child .vue files) be published to npm so that you can install, require, and use it as a component with browserify as
let component = require('published-vue-component');
I only use browserify; I don't use webpack at all. I thus bundle all .vue files into a single build.js using a vueify transform. All of the information I see currently about this either a.) reads that you should export your main .vue file (doesn't work) or b.) involves webpack.
If you go ahead and bundle the component with a vueify transform and set "main": "the/bundle/path/index.js", it seems that a vueify transform can't work without a template rendering function and thus isn't intended for single components.
If you simply export the parent .vue file, when you require the component you're going to get a syntax error from the first character of the <template> tag.
If you bundle your component as a umd module, then you can import it into browserify or webpack. Use rollup and this plugin: http://vuejs.github.io/rollup-plugin-vue/
I ran into this issue with my vue-autosuggest library, where browserify users were experiencing issues importing my module.
Check out this example rollup config for inspiration:
https://github.com/Educents/vue-autosuggest/blob/master/build/rollup.umd.config.js
Hope this helps!
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.