在一个create-react-app的typescript项目中,我试着写这个,只是为了快速测试一些东西:
// experiment.test.ts
it('experiment', () => {
console.log('test');
});
但它给了我以下错误,在它下面有一个红色的弯弯曲曲:
当提供了'——isolatedModules'标志时,所有文件都必须是模块。
然而,如果我将文件更改为如下所示,那么一切显然都很好(当然,除了未使用的导入):
// experiment.test.ts
import { Component} from 'react'; // literally anything, don't even have to use it
it('test', () => {
console.log('test');
});
为什么?这里发生了什么?——isolatedModules实际上意味着什么?
在我的例子中添加export {};这还不够。
我在webpack.config.ts文件中遇到了这个错误。错误信息如下所示:
“webpack.config。ts'不能在'——isolatedModules'下编译,因为它被认为是一个全局脚本文件。添加导入、导出或空的“export{}”语句,使其成为模块。
当我添加export {};我得到了另一个错误:
SyntaxError:意外的令牌“导出”
编译函数(node:vm:352:18)…
我尝试更改tsconfig。Json模块选项:
{
"compilerOptions": {
"module": "EsNext",
"isolatedModules": true
},
to:
{
"compilerOptions": {
"module": "CommonJS",
"isolatedModules": true
},
因为webpack.config.ts有commonjs的语法,比如module。出口={}。不幸的是,它也没有起作用。我发现没有类型定义添加到项目中,所以我运行:
npm install --save-dev ts-node @types/node @types/webpack
一切都很好。由于export{};,该文件被识别为模块。
当然,使用export {};使文件成为模块只是一种变通方法,而不是解决方案。我可以
change webpack.config file extension to .js instead of .ts and stay with the commonJS module format
change to import/export statements in ES modules format and use the .mjs file extension, because Node.js has stable support for ES modules since version 13.2.0 was introduced. Nevertheless, that would trigger other problems with changing commonJS syntax
Can I use as es-modules for webpack config?
leave .ts file extension, follow the webpack configuration guide for typescript and use ES modules
link
我选择了第三个选项,不得不添加导入'webpack-dev-server';避免类型错误。我的配置改变如下:
export {};
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = (env) => {...}
:
import * as path from 'path';
import * as webpack from 'webpack';
import 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const config = (env: { [x: string]: any; }): webpack.Configuration => {...}
export default config;
在我的例子中添加export {};这还不够。
我在webpack.config.ts文件中遇到了这个错误。错误信息如下所示:
“webpack.config。ts'不能在'——isolatedModules'下编译,因为它被认为是一个全局脚本文件。添加导入、导出或空的“export{}”语句,使其成为模块。
当我添加export {};我得到了另一个错误:
SyntaxError:意外的令牌“导出”
编译函数(node:vm:352:18)…
我尝试更改tsconfig。Json模块选项:
{
"compilerOptions": {
"module": "EsNext",
"isolatedModules": true
},
to:
{
"compilerOptions": {
"module": "CommonJS",
"isolatedModules": true
},
因为webpack.config.ts有commonjs的语法,比如module。出口={}。不幸的是,它也没有起作用。我发现没有类型定义添加到项目中,所以我运行:
npm install --save-dev ts-node @types/node @types/webpack
一切都很好。由于export{};,该文件被识别为模块。
当然,使用export {};使文件成为模块只是一种变通方法,而不是解决方案。我可以
change webpack.config file extension to .js instead of .ts and stay with the commonJS module format
change to import/export statements in ES modules format and use the .mjs file extension, because Node.js has stable support for ES modules since version 13.2.0 was introduced. Nevertheless, that would trigger other problems with changing commonJS syntax
Can I use as es-modules for webpack config?
leave .ts file extension, follow the webpack configuration guide for typescript and use ES modules
link
我选择了第三个选项,不得不添加导入'webpack-dev-server';避免类型错误。我的配置改变如下:
export {};
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = (env) => {...}
:
import * as path from 'path';
import * as webpack from 'webpack';
import 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const config = (env: { [x: string]: any; }): webpack.Configuration => {...}
export default config;