我对巴贝尔有一个非常困惑的问题。
当我运行yarn run dev时，我收到以下错误：
(function (exports, require, module, __filename, __dirname) { import _slicedToArray from "babel-runtime/helpers/slicedToArray";
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:537:28)
at loader (/home/raphael/workspace/yopp/fo/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/home/raphael/workspace/yopp/fo/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Module.require (module.js:517:17)
at require (internal/module.js:11:18)
但如果我从transform-runtime中的插件中删除.babelrc，请等待它编译然后再添加，它将编译并正常运行。
这是我的.babelrc：
{
"presets": [
[
"env",
{
"targets": {
"browsers": [
"> 1% in FR",
"safari >= 10"
]
},
"modules": false
}
],
"react",
"flow"
],
"plugins": [
"transform-object-rest-spread",
"transform-class-properties",
"transform-runtime",
"react-hot-loader/babel"
],
"env": {
"test": {
"presets": [
[
"env",
{
"modules": "commonjs"
}
],
"react",
"flow"
],
"plugins": [
"transform-object-rest-spread",
"transform-class-properties",
"transform-runtime",
"react-hot-loader/babel"
]
}
}
}
在base.config.babel.js：
const TENANT = process.env.TENANT
if (!TENANT) throw new Error(['TENANT variable undefined!'])
const webpack = require("webpack")
const path = require('path')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const BundleTracker = require('webpack-bundle-tracker')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const asset_root = path.join(__dirname, "../../assets")
const tenant_root = path.join(asset_root, `${TENANT}`)
const common_root = path.join(asset_root, "common")
const tsconfig = path.join("ts_configs", `${TENANT}_ts_config.json`)
const siteConfig = {
name: 'fo',
context: tenant_root,
entry: {
vendor: [
'normalize.css',
'js-cookie',
'fine-uploader',
'jquery',
'jquery-menu-aim',
'slick-carousel',
'font-awesome/css/font-awesome.css',
'animate.css',
'balloon-css',
'flatpickr',
],
myEntry: 'js/whatever',
[... other entries]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.ts$/,
use: [{
loader: 'babel-loader'
}, {
loader: 'awesome-typescript-loader?configFileName=' + tsconfig,
}
]
},
{
test: /\.tsx$/,
use: [{
loader: 'babel-loader'
}, {
loader: 'awesome-typescript-loader?configFileName=' + tsconfig,
}
]
},
{
test: /\.css$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'resolve-url-loader'},
]
},
{
test: /\.scss$/,
use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'resolve-url-loader',
{
loader: 'sass-loader',
options:
{
sourceMap: true,
includePaths: [
path.join(tenant_root, 'scss'),
path.join(common_root, 'scss'),
asset_root
]
}
},
'css-modules-flow-types-loader',
]
}),
)
},
{
test: /\.(png|jpe?g|gif)$/,
use:
'url-loader?limit=8192&name=images/[name].[md5:hash:hex:12].[ext]',
},
{
test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
use:
'file-loader?name=fonts/[name].[md5:hash:hex:12].[ext]&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use:
'file-loader?name=fonts/[name].[md5:hash:hex:12].[ext]&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use:
'file-loader?name=fonts/[name].[md5:hash:hex:12].[ext]'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use:
'file-loader?name=images/[name].[md5:hash:hex:12].[ext]&mimetype=image/svg+xml'
}
]
},
resolve: {
modules: [tenant_root, common_root, asset_root, "node_modules"],
extensions:
['.js', '.ts', '.tsx'],
}
,
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV']),
new webpack.DefinePlugin({"TENANT": JSON.stringify(TENANT)}),
new CleanWebpackPlugin(['static/webpack_bundles/'], {root: tenant_root}),
new webpack.optimize.CommonsChunkPlugin({
names: [
'common',
'vendor'
]
}),
new BundleTracker({filename: `webpack-stats/${TENANT}/webpack-stats.json`})
]
}
module.exports = [siteConfig]
在dev.config.babel.js：
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')
const webpack = require("webpack")
const WEBPACK_DEV_SERVER_HOST = "localhost"
const WEBPACK_DEV_SERVER_PORT = process.env.WEBPACK_DEV_SERVER_PORT
if (!WEBPACK_DEV_SERVER_PORT) throw new Error(['WEBPACK_DEV_SERVER_PORT variable undefined!'])
const STATICS_PATH_SUFFIX = 'static/webpack_bundles/'
const [siteConfig] = require('./base.config.babel.js')
siteConfig.stats = {
// fallback value for stats options when an option is not defined (has precedence over local webpack defaults)
all: undefined,
// Add asset Information
assets: false,
// Sort assets by a field
// You can reverse the sort with `!field`.
assetsSort: "field",
// Add information about cached (not built) modules
cached: false,
// Show cached assets (setting this to `false` only shows emitted files)
cachedAssets: false,
// Add children information
children: true,
// Add chunk information (setting this to `false` allows for a less verbose output)
chunks: false,
// Add built modules information to chunk information
chunkModules: false,
// Add the origins of chunks and chunk merging info
chunkOrigins: false,
// `webpack --colors` equivalent
colors: true,
// Display the distance from the entry point for each module
depth: false,
// Display the entry points with the corresponding bundles
entrypoints: false,
// Add --env information
env: false,
// Add errors
errors: true,
// Add details to errors (like resolving log)
errorDetails: true,
// Add the hash of the compilation
hash: false,
// Set the maximum number of modules to be shown
maxModules: 15,
// Add built modules information
modules: false,
// Sort the modules by a field
// You can reverse the sort with `!field`. Default is `id`.
modulesSort: "field",
// Show dependencies and origin of warnings/errors (since webpack 2.5.0)
moduleTrace: true,
// Show performance hint when file size exceeds `performance.maxAssetSize`
performance: false,
// Show the exports of the modules
providedExports: false,
// Add public path information
publicPath: true,
// Add information about the reasons why modules are included
reasons: true,
// Add the source code of modules
source: true,
// Add timing information
timings: true,
// Show which exports of a module are used
usedExports: false,
// Add webpack version information
version: false,
// Add warnings
warnings: true,
}
siteConfig.plugins = siteConfig.plugins.concat([
new ExtractTextPlugin("[name].css"),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin(), // Adds relative module path to hot module logging
])
siteConfig.output = {
path: path.resolve(siteConfig.context, STATICS_PATH_SUFFIX),
publicPath: `https://${WEBPACK_DEV_SERVER_HOST}:${WEBPACK_DEV_SERVER_PORT}/${STATICS_PATH_SUFFIX}`,
filename: '[name].js'
}
siteConfig.devtool = 'cheap-module-source-map'
siteConfig.devServer = {
hot: true,
inline: true,
historyApiFallback: true,
host: WEBPACK_DEV_SERVER_HOST,
port: WEBPACK_DEV_SERVER_PORT,
https: true,
headers: {"Access-Control-Allow-Origin": "*"},
disableHostCheck: true,
stats: 'minimal'
}
module.exports = siteConfig
在package.json中（我知道devDependencies中包含太多内容：D）：
{
"name": "fo",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "NODE_ENV='development' TENANT=$TENANT webpack-dev-server --config project/webpack/dev.config.babel.js",
"build": "NODE_ENV='production' TENANT=$TENANT webpack --config project/webpack/prod.config.babel.js --progress -p",
"test": "jest --verbose"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/jquery": "3.3.1",
"@types/js-cookie": "2.1.0",
"@types/moment": "2.13.0",
"@types/react": "16.3.12",
"@types/slick-carousel": "1.6.32",
"animate.css": "3.6.1",
"awesome-typescript-loader": "3.4.1",
"babel": "6.23.0",
"babel-core": "6.26.0",
"babel-jest": "22.4.3",
"babel-loader": "7.1.4",
"babel-plugin-transform-async-to-generator": "6.24.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-transform-runtime": "6.23.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-flow": "6.23.0",
"babel-preset-react": "6.24.1",
"balloon-css": "0.5.0",
"bem-classname": "0.1.1",
"browserslist": "3.0.0",
"clean-webpack-plugin": "0.1.18",
"compression-webpack-plugin": "1.1.6",
"css-hot-loader": "1.3.2",
"css-loader": "0.28.9",
"css-modules-flow-types-loader": "1.1.0",
"extract-text-webpack-plugin": "3.0.2",
"fast-memoize": "2.3.2",
"favicons-webpack-plugin": "0.0.7",
"file-loader": "1.1.6",
"file-type": "7.5.0",
"filesize": "3.6.1",
"fine-uploader": "5.15.6",
"flatpickr": "4.3.2",
"flow-bin": "0.70.0",
"font-awesome": "4.7.0",
"formik": "0.11.11",
"immutability-helper": "2.6.6",
"jest": "22.4.3",
"jest-each": "0.3.1",
"jquery": "3.3.1",
"jquery-menu-aim": "1.1.0",
"js-cookie": "2.2.0",
"less": "3.0.0",
"less-loader": "4.0.5",
"moment": "2.20.1",
"node-sass": "4.8.3",
"normalize.css": "8.0.0",
"postcss-cssnext": "3.1.0",
"postcss-flexbugs-fixes": "3.3.0",
"postcss-loader": "2.1.4",
"postcss-reporter": "5.0.0",
"promise-polyfill": "7.1.2",
"react": "16.3.1",
"react-dom": "16.3.1",
"react-draggable": "3.0.5",
"react-dropzone": "4.2.9",
"react-hot-loader": "4.1.1",
"react-modal": "3.4.2",
"react-redux": "5.0.7",
"read-chunk": "2.1.0",
"redux": "4.0.0",
"redux-devtools-extension": "2.13.2",
"redux-saga": "0.16.0",
"redux-saga-test-plan": "3.6.0",
"resolve-url-loader": "2.3.0",
"sass-loader": "7.0.1",
"slick-carousel": "1.8.1",
"style-loader": "0.21.0",
"typescript": "2.7.1",
"uglifyjs-webpack-plugin": "1.2.5",
"url-loader": "1.0.1",
"webpack": "3.11.0",
"webpack-bundle-tracker": "0.3.0",
"webpack-dev-server": "2.11.1",
"webpack-s3-plugin": "0.9.2",
"whatwg-fetch": "2.0.4"
},
"dependencies": {
"jsonschema": "1.2.4",
"react-dates": "16.6.1",
"react-grid-layout": "0.16.6",
"react-select": "1.2.1"
}
}
答案 0 :(得分：2)
事实证明，整个问题是几个月前在配置迁移过程中出错的结果。
基本webpack配置没有像我想象的那样包含 Window win = getWindow();
win.addFlags(WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED | WindowManager.LayoutParams.FLAG_DISMISS_KEYGUARD);
win.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON | WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON);
的条目，导致没有应用任何polyfill。
我只需要将babel-polyfill添加到我的babel-polyfill对象中，导致我首先安装此插件的原始错误（entry["vendor"]）就消失了。
我仍然不明白为什么这个ReferenceError: regeneratorRuntime is not defined插件引起了这个非常奇怪的问题，但我不想深入了解那个兔子洞。