我试图使用 require 挂钩来使用 Babel 将文件从 编译es5
到es6
. 不幸的是,运行后npm install babel-register --save-dev
它仍然找不到模块。
$ heroku logs
2017-09-10T00:52:40.511160+00:00 app[web.1]: Error: Cannot find module 'babel-register'
2017-09-10T00:52:40.511161+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:469:15)
2017-09-10T00:52:40.511162+00:00 app[web.1]: at Function.Module._load (module.js:417:25)
2017-09-10T00:52:40.511163+00:00 app[web.1]: at Module.require (module.js:497:17)
2017-09-10T00:52:40.511163+00:00 app[web.1]: at require (internal/module.js:20:19)
2017-09-10T00:52:40.511164+00:00 app[web.1]: at Object.<anonymous> (/app/src/server.js:2:1)
2017-09-10T00:52:40.511164+00:00 app[web.1]: at Module._compile (module.js:570:32)
2017-09-10T00:52:40.511165+00:00 app[web.1]: at Object.Module._extensions..js (module.js:579:10)
2017-09-10T00:52:40.511165+00:00 app[web.1]: at Module.load (module.js:487:32)
2017-09-10T00:52:40.511166+00:00 app[web.1]: at tryModuleLoad (module.js:446:12)
2017-09-10T00:52:40.511166+00:00 app[web.1]: at Function.Module._load (module.js:438:3)
我的 server.js 文件仅保留用于es5
它需要index.js
包含我所有导入的组件的es6
.
// server.js
// only ES5 is allowed in this file
require("babel-register")({
presets: [ 'es2015' ]
});
var app = require("./index.js");
我错过了什么package.json
吗?
// package.json
{
"name": "youtube-instant-search",
"version": "1.0.0",
"description": "Renders youtube videos after keystrokes",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"build": "babel src -d build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"@types/react-addons-create-fragment": "^0.14.17",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"prop-types": "^15.5.10",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-intl": "^2.3.0",
"react-redux": "^4.0.0",
"redux": "^3.0.4",
"youtube-api-search": "0.0.5"
}
}
这是 webpack 配置文件
module.exports = {
entry: ["./src/index.js"],
output: {
path: __dirname,
publicPath: "/",
filename: "bundle.js"
},
module: {
loaders: [
{
exclude: /node_modules/,
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
],
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
},
resolve: {
extensions: ["", ".js", ".jsx"]
},
devServer: {
contentBase: "./"
}
};
我的问题似乎是什么?
编辑
显然,babel-register
还没有准备好生产。我的替代方案是什么?如何编译es5
以es6
使其可用于生产?我可以只使用webpack
and来做到这一点node
吗?