I'm wondering, if it is possible use an npm package like sha256 with a project that is compiled with Closure, like https://github.com/angular/closure-demo.
I don't want to use global variables with externs but sth like require('sha256') or import ... from 'sha256';
Is this currently supported?
Wishes,
Manfred
Closure will not compile npm modules that are required by your application, so you would need to use another tool like Browserify in conjunction with Closure. Browserify will traverse your npm dependencies and concatenate them into a single file (example: http://javascriptplayground.com/blog/2013/11/backbone-browserify/).
The bundled output of Browserify can then be compiled with Closure like any other JS file. We've used a similar process with gulp to compile Typescript into JS and then further optimize it with Closure.
Related
So, the basic usage of SASS in react is
Install node-sass and import ./mysass.scss in index.js file
I did the same it worked with bootstrap SASS.
I have successfully imported bootstrap.scss in index.js file
import 'bootstrap/scss/bootstrap.scss';
But, now if I try to import mine it did not work.
Let me give you some information about my SASS files.
My style.scss file importing other CSS modules by using #use instead of #import in sass.
For example
Using -> `#use 'sections/navbar';`
Instead of -> `#import 'sections/navbar';`
I am also using #use "sass:map";
Does this #use create the problem?
I have checked the bootstrap.scss file and they are using #import.
See this issue on Github: Link. Solution posted by user asyncLiz.
That error is typically seen when using the node-sass implementation, which does not support Sass modules and is not supported by MDC. You'll need to use the Dart sass implementation.
Luckily it's an easy replacement when using sass-loader. Run npm uninstall node-sass && npm install sass. sass-loader will automatically use the new implementation.
If it does not, check your webpack.config.js in case you're manually specifying the implementation in your sass-loader options. If you are, change implementation: require('node-sass') to implementation: require('sass').
I have a problem, I'm trying to build a component library and at the same time I would like to have a dev server in the same project for fast debugging and developing of this component library.
Currently my configuration is next, for library building I use typescript to transpile to es5 and I have all styles as scss and compile them into css with node-sass. For this config to work I import styles as css(not sass) since otherwise scss files won't be found in lib directory.
Here are my source files:
And this is lib folder after being compiled:
And this is my configuration for building lib folder
Now I'm trying to configure dev server with webpack and I decided to import components directly from src (not lib) to fast forward development. And it doesn't work with my current styles imports (as css) because webpack compiles my scss styles as a big bundle and merges it into js bundle but those statements where I import css are still there which case errors.
Module not found: Error: Can't resolve './Title.css'
I believe there is a solution to this problem but which way to take I'm not sure, please suggest!
My preference is to keep library building without webpack and use webpack for dev server
I'm using the Immutable library (v4.0.0-rc2) and am trying to setup flow to use the typedefs included with the library. The typedefs are located at immutable/dist/immutable.js.flow, which I've duplicated under my project's ./flow-typed/npm directory.
The problem that I have is that flow works with every other module but Immutable and I keep getting an error whenever I attempt to include the module: required module not found.
Having inspected the contents of immutable.js.flow, there is no declare module block anywhere to be found, which I believe to be the cause of the error. There are a bunch of export statements at the end of the file though.
How can I include the typedefs so the thing just works? IOW, what can I do that doesn't involve providing the typedefs under a manually-created declare module block?
As you are using latest version of immutablejs library, all you need to do is install flow-typed library
Then just run
yarn flow-typed install
This should install all flow-typed dependencies based on your project's package.json and it will also create module declarations for any packages which don't have flow types yet.
And you don't need to copy any immutable flow definitions from node_modules to flow-typed/npm directory, because flow-typed will resolve automatically the flow types either from node_modules or from flow-typed/npm directory.
I have a React component and I publish the component in NPM registry that I build with webpack. In my main project I consumed the component npm package JS like that:
import myComp from 'myComp';
The problem is that myComp also has CSS, that I build into dist/index.css with the help of webpack and ExtractTextPlugin (which builds all the css into one file).
And I want to consume the style like this:
import 'myComp/index.css';
Or
import 'myComp/index';
And in myComp npm package I want to expose it in a way that will support this import method.
NOTE: I don't want to import it directly from node_modules
import '../../../node_modules/myComp/index.css'; // bad
Thanks!
So it's easier than I thought, all you need to do is import the CSS like that (as I did in the question):
import 'myComp/dist/style.css';
And make sure your tools (browserify/webpack etc..) can handle loading css into your javascript file.
So the issue was more related to the building process.
Also, if you want to push specific code into npm registry you can use "files" inside package.json. This way you'll end up with just the files you need in npm registry.
files: [
"dist/*.css"
]
You can also use tools like:
https://github.com/rotundasoftware/parcelify - for browserify
https://www.npmjs.com/package/parcelify-loader - for webpack
But I didn't like them. It forces a dependency on the consumer of your npm package.
I try to wrap a javascript library with a meteor package.
When i fork the library it has no built javascript file inside the repository. Normally someone would run grunt dist to build the dist/library.js file.
Meteor Package description:
Package.onUse(function(api) {
api.addFiles([
'dist/library.js',
])
})M
this can't work because the file does not exist yet.
How can i create a package from that library? is coping the library.js file the only way?
If you want to do this, you're going to have to require Grunt, run Grunt through the JavaScript API (not the CLI) to compile dist/library.js, and then require it.
It would be much easier to just compile it outside of Meteor and place it in the folder, but if you want to do things The Right Way™ that's how you'd do it. Let me know if you have any implementation-specific questions!