我拼命尝试让我的 Webpack 配置文件将 ES6 转换为 ES5，但由于某种原因它似乎不起作用。我仍然在导出的 js 代码中获取“const”变量、箭头函数和扩展运算符。我已附上我的 webpack 配置文件和 package.json 文件 - 任何帮助将不胜感激。
包.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:dev": "cross-env NODE_ENV=development webpack --mode development",
"build:prod": "cross-env NODE_ENV=production webpack --mode production",
"start": "webpack-dev-server --port 9000 --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.7.7",
"@babel/runtime": "^7.8.4",
"autoprefixer": "^9.7.3",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^6.0.3",
"css-loader": "^3.4.0",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.0",
"typescript": "^3.7.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@babel/polyfill": "^7.8.3",
"@glidejs/glide": "^3.4.1",
"aos": "^3.0.0-beta.6",
"axios": "^0.19.2",
"core-js": "2",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"query-string": "5.1.1",
"scrollbooster": "^2.1.0",
"simple-parallax-js": "^5.2.0",
"smooth-scrollbar": "^8.5.1",
"tippy.js": "^5.1.4"
}
}
Webpack 配置:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const data = require('../pageinfo.json');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: ['@babel/polyfill','./src/scripts/index.js'],
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [{
test: [/.css$|.scss$/],
use: [MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|svg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images'
}
}]
},
{
test: /\.m?js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: [["@babel/preset-env", { "useBuiltIns": "usage" }]],
plugins: [
["@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/fonts'
}
}]
}
]
},
resolve: {
extensions: ['.js']
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
}),
new CopyWebpackPlugin([{
from: './src/assets/images',
to: 'assets/images'
}]),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'style.[chunkhash].css'
})
]
};
最佳答案
转到您的 package.json 文件。 babel 命令有两个参数:ES6 代码的路径和 ES5 代码所在的路径。
如果您将所有 JavaScript 代码都存放在一个目录中，那么您可以将 -d 标志添加到命令中，告诉 Babel 查找目录而不是文件。对于我的示例，我的 JavaScript 代码位于 src 目录中，但希望将 ES5 代码放在构建目录中。
// package.json
...
"scripts": {
"build": "babel src -d build",
},
...
然后运行 Babel 命令
创建 .babelrc 文件并准备好构建命令后，只需在命令行中运行它即可。
npm run build
关于javascript - Babel 没有将 ES6 转译为 ES5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60209765/