browserify | 易学教程

Simple solution to share modules loaded via NPM across multiple Browserify or Webpack bundles

阅读更多关于 Simple solution to share modules loaded via NPM across multiple Browserify or Webpack bundles

问题 Pulling my hair out here looking for a simple solution to share code, required via NPM, across multiple Browserify or Webpack bundles. Thinking, is there such a thing as a file "bridge"? This isn't due to compile time (I'm aware of watchify) but rather the desire to extract out all of my vendor specific libs into vendor.js so to keep my app.js filesize down and to not crash the browser with massive sourcemaps. Plus, I find it way cleaner should the need to view the compiled js arise. And so:

Browserify require returns an empty object

阅读更多关于 Browserify require returns an empty object

how to detect when browserify is being run?

阅读更多关于 how to detect when browserify is being run?

问题 I have a library that I want to use in both client side and server side. However, because request is not compatible with browserify, when compiling using browserify, I need to use a different library called browser-request if (inNodejsRuntime) { var request = require('request'); } else if (isBrowserifyRuntime) { var request = require('browser-request'); } How do I go about detecting when browserifying is running vs when it is inside node 回答1: If you are just doing a simple module swap with

Sharing common code across pages with Browserify

阅读更多关于 Sharing common code across pages with Browserify

问题 I have a fairly large multi-page javascript applications that uses requirejs to organize code. I am researching moving to browserify because I like the simplicity that it offers and I am already used to the node.js module system. Currently on each page I have javascript that goes like this <script data-main="/scripts/config/common" src="/scripts/lib/require.js"> <script data-main="/scripts/config/page-specific-js" src="/scripts/lib/require.js"> and I have a common build step and a build for

How to “require” text files with browserify?

阅读更多关于 How to “require” text files with browserify?

问题 I am using browserify (using browserify-middleware) how can I require simple text files, something like: var myTmpl = require("myTmpl.txt"); I cheked stringify plugin for browserify but the code in the documentation is not working with browserify V2 回答1: require() is really best for just javascript code and json files to maintain parity with node and to improve readability of your code to outsiders who expect require() to work the way it does in node. Instead of using require() to load text

Make browserify modules external with Gulp

阅读更多关于 Make browserify modules external with Gulp

I have a library lib.js that I want to create from lib/a.js and lib/b.js and to be able to use it from a script client.js using var a = require('lib/a.js'); and that it works when I just include the compiled lib.js library before client.js (therefore, lib.js has to declare a require function that knows about lib/a.js ) I guess I have to use external and alias but I am not sure what is the proper way to do it Also, is it possible to have a Gulp file that creates all the alias automatically for the folders in my library? eg. creates an alias for all the files in the lib/ dir? Here are a couple

How to do code coverage with karma, typescript, and browserify

阅读更多关于 How to do code coverage with karma, typescript, and browserify

How do you setup karma test runner to generate code coverage reports of a typescript project? Given the following folder structure and karma.conf.js file I'm already using karma to run my tests written in TypeScript. I already fiddled around with karma-coverage and remap-istanbul but without any luck yet. If possible I'd like to do it without any additional npm scripts . . ├── karma.conf.js ├── package.json ├── src │ └── add.ts ├── test │ └── addSpec.ts ├── tsconfig.json ├── typings │ ├── globals │ └── index.d.ts └── typings.json karma.conf.js var istanbul = require('browserify-istanbul');

Using browserify with npm jQuery and non-npm plugins

阅读更多关于 Using browserify with npm jQuery and non-npm plugins

问题 I am using browserify to bundle front-end code. It's been great so far, but I've been having difficulty mixing npm and non npm packages. For example, using the npm version of jQuery with non CJS versions of jQuery plugins. My current solution is to use the browser key in package.json to point to jQuery's dist, and then use browserify-shim to add it as a dependency of the plugins. Is there a cleaner way to do this than what I currently have? Edit: I'm currently trying to use npm and package

Error using Bootstrap & jQuery Packages in ES6 with Browserify

阅读更多关于 Error using Bootstrap & jQuery Packages in ES6 with Browserify

I'm trying to use Bootstrap with jQuery . I'm using Browserify with a Babel transform to compile. I get the following error. Uncaught ReferenceError: jQuery is not defined I've tried importing the packages like this, but I get the above error. import $ from 'jquery'; import Bootstrap from 'bootstrap'; Searching around, I found this answer , so I tried this but I still get the same error. import $ from 'jquery'; window.$ = window.jQuery = $; import Bootstrap from 'bootstrap'; Bootstrap.$ = $; Am I importing these packages incorrectly with ES6 or is it done in a different way? The last thing I

Is there a way to render multiple React components in the React.render() function?

阅读更多关于 Is there a way to render multiple React components in the React.render() function?

问题 For example could I do: import React from 'react'; import PanelA from './panelA.jsx'; import PanelB from './panelB.jsx'; React.render( <PanelA /> <PanelB />, document.body ); where React would render: body PanelA PanelB Currently I'm getting the error: Adjacent JSX elements must be wrapped in an enclosing tag while transpiling with browserify and babelify 回答1: Since the React v16.0 release you can render an array of components without wrapping items in an extra element when you are inside a