2

Clearly I'm missing something incredibly simple here, so I apologize in advance for the dumb question. I have no errors so it's difficult to Google.

I'm trying to export something, anything, from an npm package written in ES6, compiled with babel and webpack.

I followed this http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/ for my webpack setup, leaving it mostly-identical, but find it below for reference. I made a test export repo just to make sure it wasn't anything in the code of the module I was trying to export; find that below as well. Any help would be greatly appreciated; at this point I feel like I'm taking crazy pills.

src/index.js

const test = "test";

export default test;

webpack.config.js

var path = require("path");
var webpack = require("webpack");

module.exports = {
  entry: [
    "babel-polyfill",
    "./src/index"
  ],

  output: {
    //path: path.join(__dirname, "lib"),
    //filename: "[name].js"
    filename: "./lib/index.js"
  },

  // import bare, .js, and .jsx files
  resolve: {
    extensions: ["", ".js", ".jsx"]
  },

  devtool: "source-map",

  module: {
    loaders: [
      {
        loader: "babel-loader",

        // only load src
        include: [
          path.resolve(__dirname, "src")
        ],

        // only compile .js and .jsx files
        test: /\.jsx?$/,

        query: {
          plugins: ["transform-runtime", "transform-decorators-legacy"],
          //plugins: ["transform-decorators-legacy"],
          presets: ["es2015", "stage-0", "react"]
        }
      },
    ]
  },
  debug: true
};

package.json

{
  "name": "test-package",
  "version": "0.0.1",
  "description": "test",
  "main": "lib/index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xxx/xxx.git"
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
  "keywords": [
    "es6"
  ],
  "author": "me",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/xxx/xxx/issues"
  },
  "homepage": "https://github.com/xxx/xxx#readme",
  "dependencies": {
    "babel-polyfill": "^6.5.0",
    "babel-runtime": "^6.5.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.5.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack -p

other project

npm i ../test-package

(verify actually installed, search for "test" in lib/index.js and find what should be the export)

import test from "test-package";

console.log(test);
console.log(Object.keys(test));

output: empty object, empty array

Californian
  • 808
  • 1
  • 8
  • 15
  • 1
    Webpack is, by default anyway, for bundling full applications. It sounds like you are bundling the module itself ahead of time, and then trying to load that bundle in another module? Usually your other module would reference the unbundled files and you'd bundle that. Assuming you actually need to bundle at all. – loganfsmyth Feb 23 '16 at 23:01
  • Hmm interesting. I could just use babel, but afaik it's bad practice to publish ES6 to NPM at this time, so I at least have to do that. I just figured webpack would be a more robust way of actually doing the transpilation to ES5. The more I think about this the more I like the concept though; it would make it easier for others to view the code on the fly in their `node_modules` folder. – Californian Feb 23 '16 at 23:19
  • Woooo not sure what was wrong with the webpack thing, but who cares, `babel` on its own worked! Thanks! If you make your comment an answer I'll upvote/accept it. :D – Californian Feb 24 '16 at 00:15

1 Answers1

0

Why not trying 

import * as test from "test-package";

And then

console.log(test);
prosti
  • 42,291
  • 14
  • 186
  • 151