[英]Babel isn't transpiling ES6 to ES5
我拼命地試圖讓我的 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"
}
}
網絡包配置:
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 查找目錄而不是文件。 對於我的示例,我的 src 目錄中有我的 JavaScript 代碼,但希望我的 ES5 代碼放在構建目錄中。
// package.json
...
"scripts": {
"build": "babel src -d build",
},
...
然后只需運行 Babel 命令
創建 .babelrc 文件並准備好構建命令后,只需在命令行中運行它即可。
npm run build
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.