【问题标题】:ES6 Export with BabelES6 使用 Babel 导出
【发布时间】:2016-06-05 20:17:43
【问题描述】:

显然我在这里遗漏了一些非常简单的东西,所以我提前为这个愚蠢的问题道歉。我没有错误,所以很难用 Google 搜索。

我正在尝试从一个用 ES6 编写、使用 babel 和 webpack 编译的 npm 包中导出一些东西。

我按照http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/ 进行了我的 webpack 设置,使其基本相同,但请在下面找到它以供参考。我做了一个测试导出 repo 只是为了确保它不是我试图导出的模块的代码中的任何内容;也可以在下面找到。任何帮助将不胜感激;在这一点上,我觉得我正在服用疯狂的药丸。

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


其他项目

npm i ../test-package

(验证实际安装,在 lib/index.js 中搜索“test”并找到应该导出的内容)

import test from "test-package";

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

输出:空对象,空数组

【问题讨论】:

  • 默认情况下,Webpack 用于捆绑完整的应用程序。听起来您正在提前捆绑模块本身,然后尝试将该捆绑包加载到另一个模块中?通常,您的其他模块会引用未捆绑的文件,然后您将其捆绑。假设您实际上需要捆绑。
  • 嗯,很有趣。我可以只使用 babel,但是现在将 ES6 发布到 NPM 是不好的做法,所以我至少必须这样做。我只是认为 webpack 将是一种更强大的方式来实际进行到 ES5 的转换。我想得越多,我就越喜欢这个概念;这将使其他人更容易在他们的node_modules 文件夹中即时查看代码。
  • Woooo 不知道 webpack 出了什么问题,但谁在乎呢,babel 自己工作!谢谢!如果您将评论作为答案,我会投票/接受。 :D

标签: npm ecmascript-6 webpack


【解决方案1】:

为什么不试试

import * as test from "test-package";

然后

console.log(test);

【讨论】:

    猜你喜欢
    • 2023-03-12
    • 2016-06-27
    • 2017-06-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-11
    相关资源
    最近更新 更多