在babel预设上指定选项会切断转译器吗?

时间:2019-03-20 15:28:52

标签: webpack babeljs babel-loader

因此,如果我键入以下内容,我将遇到的问题是

presets: ["@babel/preset-typescript]

我的代码被编译,但是如果我输入:

presets: [["@babel/preset-typescript", {allExtensions: true, isTSX: true}]]

不是。

我正在使用webpack,但问题绝对在babel方面。不过,这是我的webpack配置:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const envSettings = require(`./frontend.env.${process.env.NODE_ENV}.json`)

module.exports = {

    watchOptions: {
        ignored: [/src\/backend/, /node_modules/],
    },

    entry: {
        app: './src/frontend/react/browserRouter.tsx'
    },

    output: {
        path: path.resolve(__dirname, 'assets/scripts'),
        publicPath: '/assets/scripts'
    },

    /*resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },*/


    module: {
        rules: [{
            test: /\.ts.*$/, // include .js files
            exclude: [/src\/backend/, /node_modules/], // exclude any and all files in the node_modules folder
            use: [{ loader: "babel-loader",
                options:{
                    presets: [["@babel/preset-typescript", {allExtensions: true, isTSX: true}]]
                }}]
        },{
            test: /\.js.*$/, // include .js files
            exclude: [/index\.template\.html/, /html-webpack-plugin/],
            use: [{ loader: "babel-loader",
                options:{
                    presets: [["@babel/preset-env", {useBuiltIns: 'usage'}]]
                } }]
        },
            {
                test: /\.js$/, // include .js files
                enforce: "pre", // preload the jshint loader
                exclude: /node_modules/, // exclude any and all files in the node_modules folder
                use: [{ loader: "source-map-loader" }]
            },{
                test: /\.css$/, use: [
                    'style-loader', 'css-loader']
            },{
                test: /\.(png|svg|jpg|gif|jpeg)$/, use: [
                    'file-loader']
            }]
    },

    plugins: [
        // new BundleAnalyzerPlugin(),
        new webpack.DefinePlugin({
            ENV_SETTINGS: JSON.stringify(envSettings),
        }),
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, 'index.html'),
            template: path.resolve(__dirname, 'src/index.template.html')
        }),
    ],

    externals: {
        fs: 'fs'
    }
};

正在向我编译的第一个文件出现以下错误:

ERROR in ./src/frontend/react/browserRouter.tsx 7:22
Module parse failed: Unexpected token (7:22)
You may need an appropriate loader to handle this file type.
| import "../../../node_modules/antd/dist/antd.min.css";
| import { AppLoadWithRouter } from "./AppLoader";
> const browserRouter = <BrowserRouter>
|             <AppLoadWithRouter />
|     </BrowserRouter>;

Here is a link to the github issue

0 个答案:

没有答案