【发布时间】: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