Я бы хотел использовать ts-загрузчик с babel-polyfill, но без babel-loader.
Но когда я пытаюсь построить проект, я получаю эти ошибки. Кто-нибудь может сказать мне, что мне не хватает.
ERROR in ./src/index.tsx 4:16
Module parse failed: Unexpected token (4:16)
File was processed with these loaders:
* ./node_modules/ts-loader/index.js
* ./node_modules/tslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| import ReactDOM from "react-dom";
| import { MyComponent } from "./containers/my-component";
> ReactDOM.render(<MyComponent/>, document.getElementById("root"));
@ multi babel-polyfill ./src/index.tsx kb[1]
|
Package.json
{
"name": "test-react",
"version": "1.0.0",
"description": "Test",
"main": "index.js",
"scripts": {
"start": "node index.js",
"build": ".\\node_modules\\.bin\\webpack --config webpack.dev.js",
"build-w": ".\\node_modules\\.bin\\webpack -w --config webpack.dev.js",
"prod-build": ".\\node_modules\\.bin\\webpack --config webpack.prod.js"
},
"devDependencies": {
"@types/node": "^12.0.0",
"@types/prop-types": "^15.7.1",
"@types/react": "^16.8.16",
"@types/react-dom": "^16.8.4",
"@types/react-router-dom": "^4.3.3",
"@types/react-select": "^2.0.17",
"@types/react-tabs": "^2.3.1",
"css-loader": "^2.1.1",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"terser": "3.17.0",
"ts-loader": "^6.0.0",
"tslint": "^5.16.0",
"tslint-loader": "^3.5.4",
"tslint-react": "^4.0.0",
"typescript": "^3.4.5",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.2",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"mobx": "^4.9.4",
"mobx-react": "^5.4.3",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-select": "^2.4.3",
"react-tabs": "^3.0.0"
}
}
webpack.config.js
const path = require("path");
const webpack = require('webpack');
module.exports = {
entry: {
kb: ["babel-polyfill", "./src/index.tsx"]
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].bundle.js"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
mode: "development",
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be pre handled by 'tslint-loader'.
{
test: /\.tsx?$/,
enforce: 'pre',
loader: "tslint-loader",
options: {
configFile: 'tslint.json',
// Linting issues will be shown as warnings and build won't fails.
// Make it true to fail webpack build on linting errors.
emitErrors: true,
fileOutput: {
// The directory where each file's report is saved
dir: '/target/lint-errors/kb-react',
// If true, all files are removed from the report
// directory at the beginning of run
clean: true
}
}
},
// All files with a '.css' extension will be handled by 'css-loader'
{
test: /\.css$/, use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
optimization: {
runtimeChunk: "single", // enable "runtime" chunk
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
}
};