Я кодирую небольшое веб-приложение с пользовательским виртуальным домом.
Я немного боролся, но я установил стек с webpack 3 и babel 6, но я не могу использовать такие функции, как let
, const
и лямбды (es6), чтобы использовать функции javascript, которые используются при реализации приложения реакции с помощью create-react-app и javascript. Когда я пытаюсь использовать эти функции, компиляция терпит неудачу.
Мои конечные цели - обновить стек с помощью webpack 4 и babel 7, написать весь код и файл конфигурации с помощью es6; плюс в том, что стек можно легко изменить для поддержки es7 и выше, но сейчас меня интересует только es6.
класс, который не работает во время компиляции, выглядит так:
class Derived extends Base {
const attr_one = " ";
let attr_two = " ";
const lambdas = () => console.log('');
....
}
my .babelr c
{
"presets": [
["babel-preset-env", {
"useBuiltIns": "usage",
"corejs": "3",
"targets": {
"browsers": [
"> 1%",
"last 2 versions"
]
}
}],
"stage-2",
"react"
],
"plugins": [[
"syntax-dynamic-import"
], [
"babel-plugin-transform-react-jsx",
{
"throwIfNamespace": false,
"runtime": "automatic",
"importSource": "custom-virtual-dom"
}
]
]
}
конфигурация моего веб-пакета:
const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: './src/index.js',
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: ''
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
overrideBrowserslist: [
"> 1%",
"last 2 versions"
]
})
]
}
}
]
},
{
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=8000&name=images/[name].[ext]'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
filename: __dirname + '/dist/index.html',
inject: 'body'
})
]
};
мой пакет. json:
"name": "webapp",
"version": "1.0.0",
"description": "\"a testing webapp for my virtual dom\"",
"main": "src/index.js",
"scripts": {
"test": "exit 1",
"start": "webpack-dev-server",
"build": " webpack --config webpack.config.js --progress --profile --color"
},
"author": "",
"license": "",
"devDependencies": {
"autoprefixer": "^9.8.4",
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^3.6.0",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^3.0.0",
"postcss-loader": "^2.0.7",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"custom-virtual-dom": "file:../custom-virtual-dom"
}
}