{"id":15654932,"url":"https://github.com/jedwards1211/meteor-imports-webpack-plugin","last_synced_at":"2026-01-24T11:00:58.169Z","repository":{"id":57125469,"uuid":"54201295","full_name":"jedwards1211/meteor-imports-webpack-plugin","owner":"jedwards1211","description":"Webpack plugin to import and use Meteor packages like if they were real NPM packages.","archived":false,"fork":false,"pushed_at":"2018-11-12T23:47:39.000Z","size":45,"stargazers_count":25,"open_issues_count":10,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-17T14:42:47.774Z","etag":null,"topics":["meteor","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jedwards1211.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-18T12:59:52.000Z","updated_at":"2022-06-09T00:43:49.000Z","dependencies_parsed_at":"2022-08-26T21:52:55.988Z","dependency_job_id":null,"html_url":"https://github.com/jedwards1211/meteor-imports-webpack-plugin","commit_stats":null,"previous_names":["luisherranz/meteor-imports-webpack-plugin"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jedwards1211%2Fmeteor-imports-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jedwards1211%2Fmeteor-imports-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jedwards1211%2Fmeteor-imports-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jedwards1211%2Fmeteor-imports-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jedwards1211","download_url":"https://codeload.github.com/jedwards1211/meteor-imports-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251123092,"owners_count":21539812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["meteor","webpack","webpack-plugin"],"created_at":"2024-10-03T12:54:56.779Z","updated_at":"2026-01-24T11:00:57.890Z","avatar_url":"https://github.com/jedwards1211.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Meteor Imports Webpack Plugin\n\nThis plugin lets you import any Meteor package like if it was a real NPM package. It is useful when you want to use some of the Meteor tools (or even a Meteor server) but you prefer to use Webpack for the client build instead of the Meteor build system.\n\n----\n\n## How does it work\n\nThis plugin extracts the meteor packages from a **real meteor project**, which lives in a subfolder.  Your top-level project directory must *not* be a meteor project (that is, it should not contain a `.meteor` directory).\n\nIf you are going to use a Meteor server, then a good name could be `server`. If not, maybe just `meteor`. We'll stick to `server` for this guide.\n\n```bash\ncd my-project\nmeteor create server # create a real meteor project in the `server` folder\n```\n\nThen you can add or remove packages like you normally do in Meteor. You should remove each module that you don't need to make your bundle as small as possible.\n\n```bash\ncd server\nmeteor remove insecure autopublish blaze-html-templates session jquery es5-shim\n```\n\nAdd the Meteor packages you want to use.\n\n```bash\nmeteor add accounts-password aldeed:collection2 alanning:roles\n```\n\nYou can add or remove packages at any point, don't worry.\n\nInstall the plugin\n\n```bash\ncd ..\nnpm install meteor-imports-webpack-plugin --save-dev\n```\n\nInclude it in your `webpack.config.js` file\n\n```javascript\nvar MeteorImportsPlugin = require('meteor-imports-webpack-plugin');\n\nmodule.exports = {\n    ...\n    plugins: [\n      new MeteorImportsPlugin(config)\n    ]\n};\n```\n\n\nAnd finally, **include this import line** in your client entry point.\n\n```javascript\nrequire('meteor-imports'); // or import 'meteor-imports';\n```\n\n## Configuration\n\nThe `config` object passed to the plugin must contain at least these properties:\n\n```javascript\nnew MeteorImportsPlugin({\n  ROOT_URL: 'http://localhost:3000/',\n  DDP_DEFAULT_CONNECTION_URL: 'http://localhost:3000/',\n  PUBLIC_SETTINGS: {},\n  meteorFolder: 'server',\n  meteorEnv: { NODE_ENV: 'development' },\n  exclude: ['ecmascript']\n})\n```\n\nAll the `config` object is passed to `__meteor_runtime_config__` variable so if you need to pass anything else, you can.\n\n#### config.injectMeteorRuntimeConfig\n\nIf `injectMeteorRuntimeConfig` is false, `meteor-imports` will not set `window.__meteor_runtime_config__`, and you don't\nneed to include any of the relevant variables like `ROOT_URL` in the options.  Use this option if you would like to\ninject `__meteor_runtime_config__` in your own SSR.\n\n#### config.legacy\n\nIf truthy, use the `web.browser.legacy` build folder instead of the `web.browser`\nfolder.\n\n#### config.meteorFolder\n\nThe subfolder where your Meteor project is located. It can be an absolute path as well.\n\n```javascript\nnew MeteorImportsPlugin({\n  ...\n  meteorFolder: 'meteor'\n})\n```\n\n#### config.meteorProgramsFolder\n\n(Overrides `config.meteorFolder`) the path to the `programs` folder within your `meteor` folder or the result of\n`meteor build --directory`.\n\n#### config.DDP_DEFAULT_CONNECTION_URL\n\nIf you are using a Meteor server, point `DDP_DEFAULT_CONNECTION_URL` to your server url. If you are developing in local, start your Meteor server and Webpack-dev-server in different ports.\n\n```bash\n# Start the webpack-dev-server in one terminal window.\nwebpack-dev-server # http://localhost:8080\n# And the Meteor server in another.\ncd server \u0026\u0026 meteor # http://localhost:3000\n```\n\n#### config.PUBLIC_SETTINGS\n\n`PUBLIC_SETTINGS` is the equivalent to the property `public` of [Meteor's settings.json](http://docs.meteor.com/#/full/meteor_settings) file. You can still use a `settings.json` for your server or even import it from Webpack:\n\n```javascript\nvar meteorSettings = require('./server/settings.json');\n\n...\nnew MeteorImportsPlugin({\n  ...\n  PUBLIC_SETTINGS: meteorSettings.public\n})\n```\n\nFinally, you can use the settings using `Meteor.settings.public` just like you are used to.\n\n#### config.exclude\n\nIf you want to exclude some Meteor core packages you can use the optional `exclude` property.\n\nFor example, if you are not going to use DDP you can exclude all its related packages:\n\n```javascript\nnew MeteorImportsPlugin({\n  ...\n  exclude: [\n    'ddp-common',\n    'ddp-client',\n    'ddp'\n  ]\n})\n```\n\nThis is useful only for the core packages. If you don't to use a Meteor package you added, you should remove it using `meteor remove some:package`.\n\nBy default, these core packages are excluded: `'autoupdate',\n'global-imports',\n'hot-code-push',\n'reload', 'ecmascript'` beucase they are useless in Webpack.\n\nYou can get a list of the currently used packages in your meteor `program.json` file:\n\n```bash\ncd server/.meteor/local/build/programs/web.browser/\ncat program.json\n```\n\nIf you find that any other package is not useful anymore let me know and I will exclude them by default as well.\n\n#### config.meteorEnv\n\nMeteor 1.3 expects to have this property along with a `NODE_ENV` set to `'production'` or nothing (development).\n\n```javascript\nnew MeteorImportsPlugin({\n  ...\n  meteorEnv: { NODE_ENV: 'production' }\n})\n```\n\n## How to import packages\n\nOnce you have it configured, you can import any Meteor package in your code. We have followed the same Meteor 1.3 convention, so you have to prepend `meteor` to avoid name collisions with NPM packages.\n\nEach package exports its *Meteor globals* as named properties. In ES5 it looks like this.\n\n```javascript\n// ES5\nvar Meteor = require('meteor/meteor').Meteor;\nvar Mongo = require('meteor/mongo').Mongo;\nvar Tracker = require('meteor/tracker').Tracker;\nvar check = require('meteor/check').check;\nvar Match = require('meteor/check').Match;\n```\n\nBut you'd want to use es2015 for improved imports with destructuring.\n\n```javascript\n// ES2015\nimport { Meteor } from 'meteor/meteor';\nimport { Mongo } from 'meteor/mongo';\nimport { Tracker } from 'meteor/tracker';\nimport { check, Match } from 'meteor/check';\n```\n\n## How to add (or remove) a Meteor package\n\nFirst, go to your Meteor folder and add (or remove) the package.\n\n```bash\ncd server\nmeteor add aldeed:collection2\n```\n\nMake sure the Meteor project is running or run it at least once (so it downloads the package and generates the bundle). Wait until it's completely ready (`=\u003e App running at: http://localhost:3000/`).\n\n```bash\nmeteor\n```\n\nYou can stop it afterwards if you are not using a Meteor server.\n\nStart (or restart) your Webpack server\n\n```bash\ncd ..\nwebpack-dev-server\n```\n\nThat's it, you can now import it in your code.\n\n```javascript\nimport { SimpleSchema } from 'meteor/aldeed:collection2';\n\nconst BookSchema = new SimpleSchema({\n  ...\n});\n```\n\n## Vendor chunks\n\nIf you want to use the commonChunks plugin to create a separate vendor chunk and include meteor in it, use `'meteor-imports'`:\n\n```javascript\nmodule.exports = {\n  entry: {\n    app: './client/entry.js',\n    vendor: ['react', 'meteor-imports', ...],\n  },\n  ...\n  plugins: [\n    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')\n  ]\n};\n```\n\nThe default Meteor bundle (without any external package, jQuery or Blaze) is 70Kb gzipped.\n\n## Hot Module Replacement\n\nIf you want to work with HMR you need to add this to your entry file:\n\n```javascript\nif (module.hot) module.hot.accept();\n```\n\n*I am not a HMR expert so if you have a better idea of how to deal with it, let me know. It will be great to avoid reloading all the Meteor code on each change.*\n\n## Examples\n\nWebpack is a powerful but complex tool, with a non-friendly API, so reading code from examples is usually a great way to get you started.\n\n- [ES5 imports in Wepack with Meteor 1.2 server](https://github.com/luisherranz/meteor-imports-webpack-plugin-examples/tree/master/es5-meteor1.2)\n- [ES2015 imports in Wepack with Meteor 1.3 server](https://github.com/luisherranz/meteor-imports-webpack-plugin-examples/tree/master/es2015-meteor1.3)\n- [ES2015 imports in Wepack with React, HMR and Meteor 1.3 server](https://github.com/luisherranz/meteor-imports-webpack-plugin-examples/tree/master/es2015-meteor1.3-react)\n\n## App Skeletons\n\n- **[Crater](https://github.com/jedwards1211/crater) from [@jedwards1211](https://github.com/jedwards1211)**: Meteor(/React) app skeleton that runs your userland code with pure Webpack/Babel instead of isobuild.\n\n## The bad things\n\n- **Dev servers**: if you add or remove Meteor packages, you have to restart your dev servers, both Webpack and Meteor.\n- **Non used Meteor packages**: when you do `import 'meteor-imports'` all the meteor code is included in your bundle. If you are not using a package, is not enough to just not import it, you have to remove it from meteor: `meteor remove some:package`. This is not new, it's the way Meteor works.\n- **Blaze**: it doesn't work because Blaze requires a spacebars transpiler to convert the html templates into javascript. I am sure a Webpack loader could be created for this, but anyway I recommend you to switch to React (from npm). If you want to try, I suggest you start with the [spacebars compiler](https://github.com/eface2face/meteor-spacebars-compiler) created (and used) by Sergio García (@murillo128).\n- **Blaze related packages**: for the obvious same reasons, these don't work either.\n- **Hot Code Push**: for development you don't need it because the Webpack's Hot Module Replacement is more convenient, but you won't have it for production either. I am sure it won't be hard to make it work so if you need it go ahead: I will accept the PR :)\n- **Cordova**: Meteor cordova doesn't work but real [Cordova](http://cordova.apache.org/) does. The commands are pretty similar so don't worry.\n- **Cordova Hot Code Push**: same here, but don't worry, you can use the excellent [CodePush](http://microsoft.github.io/code-push/) project from Microsoft.\n\nNothing else as far as I know.\n\n## The good things\n\n- **React Native**: I haven't tested it yet, but I don't see any reason you couldn't use this plugin to import Meteor packages in a React Native project. That means, you can work with the real Meteor tools. No more 3rd party ddpclient libraries!\n- **No need for a separate Meteor fork**: I have seen other projects bringing Meteor to NPM but they fork and modify the real Meteor libraries, and therefore, they have to maintain separate codebases.\n- **Atmosphere compatibility**: Same here, forked-projects don't work with any Meteor package out of the box. This plugin does.\n- **Alternative core packages**: Until now, using a non-official core package was really difficult. With this plugin, we can create alternative core packages and substitute the official ones. For example, we could create a new Tracker package but based on [Mobx](http://mobxjs.github.io/mobx/) a superior TRP library. The API for this is not writen yet but it should be fairly easy. Open an issue if you are interested.\n\n## Collaboration\n\nIf you want you can open issues or do PR's. I am not currently using this plugin at this moment, so I won't fix things or add new features. If you want something, do a PR.\n\n## License\n\nMIT, do whatever you want.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjedwards1211%2Fmeteor-imports-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjedwards1211%2Fmeteor-imports-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjedwards1211%2Fmeteor-imports-webpack-plugin/lists"}