好。我正在引导一个简单的应用程序。我正在使用flow.js。我使用的预设是babel-preset-2015,babel-preset- react和babel-preset- stage-0。我必须在.babelrc内和webpack.config内放入相同的预设,所有这些预设才能正常工作。例如,如果我从webpack.config中将其移动,则会收到错误消息“未定义反应”。如果删除.babelrc和babel- register,则会出现错误,因为我使用import和Flow.js批注。为什么会这样呢?如果将预设放入webpack.config中,则应该可以删除.babelrc,反之亦然。这就是我的代码现在全部正常工作的样子(减去一些对该问题不重要的文件)。
start-dev.js
require('babel-register') require('./src/server/index.js')
index.js
/* @flow */ import Express from 'express' import path from 'path' import conf from '../conf/' const APP_PORT: number = conf.APP_PORT const PORT = process.env.PORT || APP_PORT const app: Express = new Express() // Middleware app.set('views', path.join(__dirname, 'views')) app.set('view engine', 'ejs') app.use(Express.static(path.join(__dirname, '../', 'client', 'dist'))) // Routes app.get('*', function (req: Object, res: Object) { res.render('index') }) app.listen(PORT, function () { console.log(`Express server is up on port ${PORT}`) })
app.js
import React from 'react' import ReactDOM from 'react-dom' ReactDOM.render( <h1>First</h1>, document.getElementById('app') )
package.json
{ "scripts": { "start-dev": "set \"NODE_ENV=development\" && babel-node ./start-dev.js", "start": "set \"NODE_ENV=development\" && node ./start-dev.js", "flow": "./node_modules/.bin/flow check", "standard": "node_modules/.bin/standard --verbose | node_modules/.bin/snazzy" }, "dependencies": { "ejs": "^2.5.6", "express": "^4.15.2", "react": "^15.4.2", "react-dom": "^15.4.2" }, "devDependencies": { "babel-cli": "^6.24.0", "babel-core": "^6.24.0", "babel-eslint": "^7.2.1", "babel-loader": "^6.4.1", "babel-preset-es2015": "^6.24.0", "babel-preset-react": "^6.23.0", "babel-preset-stage-0": "^6.22.0", "babel-register": "^6.24.0", "eslint": "^3.18.0", "eslint-config-standard": "^7.1.0", "eslint-plugin-flowtype": "^2.30.4", "eslint-plugin-react": "^6.10.3", "flow-bin": "^0.42.0", "snazzy": "^6.0.0", "standard": "^9.0.2", "webpack": "^2.3.2" } }
.babelrc
{ "passPerPreset": true, "presets": [ "es2015", "react", "stage-0" ] }
webpack.config.babel.js
'use strict' import path from 'path' const publicPath = path.resolve(__dirname, './src/client') module.exports = { devtool: '#source-maps', performance: { hints: false }, context: publicPath, entry: { bundle: './app.js' }, output: { path: path.join(publicPath, 'dist'), filename: '[name].js', publicPath: '/dist/' }, resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ 'react', 'es2015', 'stage-0' ] } } ] } }
如果将预设放入webpack.config中,则应该可以删除.babelrc,反之亦然。
不,不是这样。指定在配置的WebPack预置只会影响的WebPack,其他一切用途巴贝尔(例如babel-node,babel- register等)并不会在意你的WebPack的配置,因此并没有看到他们。
babel-node
babel- register
反之亦然。因此,如果有.babelrc,则可以删除webpack预设选项,因为在后台babel- loader使用babel,这显然会尊重.babelrc。
babel- loader
例如,如果我从webpack.config中删除它们,则会收到错误消息React is not defined。
React is not defined
问题是您.babelrc的配置与webpack配置中的配置不同。罪魁祸首是"passPerPreset": true。使用此选项,每个预设都将单独应用,而无需考虑其他预设。因此,顺序很重要。从babel文档- 插件/预设排序:
"passPerPreset": true
预设顺序相反(从最后到第一)。
这意味着他们将按照以下顺序应用:stage-0,react,es2015。由于它们是单独应用的,因此react将JSX转换为React.createElement,因为React它在范围内,并且es2015仅将导入转换为_react2.default,因此React不再定义。两个捆绑包之间的整个差异是这样的:
stage-0
react
es2015
React.createElement
React
_react2.default
@@ -9470,7 +9470,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de // var React = require('react') // var ReactDOM = require('react-dom') -_reactDom2.default.render(React.createElement( +_reactDom2.default.render(_react2.default.createElement( 'h1', null, 'Juhuuuu'
关于的信息不多passPerPreset,但在发行说明中已将其标记为实验性的,您可能应该完全避免使用。
passPerPreset
尽管将react预设放在列表的第一位是可行的,但我建议您删除passPerPreset选项,除非您有非常特殊的理由使用它。
{ "presets": [ "es2015", "react", "stage-0" ] }