Использование JS и TS в реактивном проекте - PullRequest
Новая
       11

Использование JS и TS в реактивном проекте

0 голосов
/ 31 января 2019

Я создал новый реактивный проект, следуя указаниям здесь https://docs.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-react

Он создает машинный проект реакции.

Я скопировал свои существующие JS-файлы реагирования в каталог src и изменил ts.config, сказав 

"allowJs": true,

Запуск npm start приводит к ошибкам 

    ERROR in ./components/folder/ContactComponent.js 176:13
Module parse failed: Unexpected token (176:13)
You may need an appropriate loader to handle this file type.
|       const { cookies } = this.props;
|       cookies.set('cookieUserToken', "", { path: '/'})
>       return <Redirect to="/login" />;
|     }

|
 @ ./components/App.tsx 64:25-65
 @ ./index.tsx
 @ multi ../node_modules/webpack-dev-server/client?https://localhost:3000 ../node_modules/webpack/hot/dev-server.js react-hot-loader/patch ./index.tsx

ERROR in ./components/Login/LoginComponent.js 6:4
Module parse failed: Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
| function LoginComponent() {
|   return (
>     <div id="content-main" className="login">
|       <div className="padding">
|         <div className="card card-container">
 @ ./components/App.tsx 63:23-56
 @ ./index.tsx
 @ multi ../node_modules/webpack-dev-server/client?https://localhost:3000 ../node_modules/webpack/hot/dev-server.js react-hot-loader/patch ./index.tsx
Child html-webpack-plugin for "function-file\function-file.html":

ContactComponent использует реаги-router-dom 

render() {
    if (this.state.cookieUrl === "" || this.state.cookieToken === "") {
      const { cookies } = this.props;
      cookies.set('cookieToken', "", { path: '/'})
      return <Redirect to="/login" />;
    }

Мой ts.config выглядит следующим образом 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "outDir": "dist",
    "allowUnusedLabels": false,
    "noImplicitReturns": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "lib": [
      "es7",
      "dom"
    ],
    "pretty": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

Мой webpack.config.js равен 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require("webpack");

module.exports = {
    devtool: 'source-map',
    entry: {
        app: './src/index.ts',
        'function-file': './function-file/function-file.ts'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.html', '.js']
    },
    module: {
        rules: [
            {
                test: /\.(tsx|ts|js)$/,
                exclude: /node_modules/,
                use: 'ts-loader'
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            chunks: ['app']
        }),
        new HtmlWebpackPlugin({
            template: './function-file/function-file.html',
            filename: 'function-file/function-file.html',
            chunks: ['function-file']
        }),
        new webpack.ProvidePlugin({
            Promise: ["es6-promise", "Promise"]
        })
    ]
};

Должен быть способчтобы заставить JS и TSX хорошо играть и компилировать, я попробовал несколько вариантов, которые я нашел, например, использование awesome-typescript-loader, который я установил и использовал, но я получаю ту же ошибку.

Кто-нибудь пробовал смешивать компоненты JS с компонентами React и заставить их работать вместе?

Я преобразовал файлы JS в TSX, и все работает.Я убедил себя, что это был более легкий путь.

Спасибо.

1 Ответ

0 голосов
/ 31 января 2019

В данный момент ваша конфигурация веб-пакета настроена на загрузку .tsx файлов с использованием ts-loader, но нет никаких упоминаний о .js файлах!

Это соответствует сообщению об ошибке, которое вы получаете, который поставляется из веб-пакета, а не из TypeScript:

Вам может потребоваться соответствующий загрузчик для обработки этого типа файла.

Вы можете изменить это, изменив test: /\.tsx?$/, наtest: /\.(tsx|ts|js)$/,.

Чтобы проверить это, я создал Foo.js: 

export var foo = "foo Welcome foo";

И Foo.d.ts (не забудьте, если вы хотите использовать JS с TS, тогдадля этого нужно набрать:) 

export var foo: string;

Затем в index.tsx я импортировал foo: 

import { foo } from './components/Foo';

И использовал его: 

<AppContainer>
    <>
        <h1>{foo}</h1>
        <Component title={title} isOfficeInitialized={isOfficeInitialized} />
    </>
</AppContainer>,
...