Im webpack wie kann ich das beheben 'import-Deklarationen können nur erscheinen auf dem oberen Niveau der module'?
Webpack erfolgreich erstellt und ich kann surfen auf meiner Webseite. Allerdings, das Javascript schlägt fehl, der sagt: 'import-Deklarationen können nur erscheinen auf der obersten Ebene eines Moduls'
Unten ist meine ausgegeben app.js enthält die import-Anweisungen.
Wie ändere ich mein webpack config-Datei, um loszuwerden, die import-Anweisungen, wenn es baut?
webpackJsonp([0],{
/***/0:
/***/function(module, exports, __webpack_require__) {
__webpack_require__(1);
__webpack_require__(74);
module.exports = __webpack_require__(76);
/***/},
/***/76:
/***/function(module, exports) {
"use strict";
import 'app/tools/typescriptImports.ts';
import * as mainScreenHelper from 'app/tools/mainScreenHelper';
import React from 'react';
import * as reactDom from 'react-dom';
import Router from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import routes from 'app/tools/routes';
import 'style/app.scss';
import 'font-awesome/scss/font-awesome.scss';
mainScreenHelper.removeLoadingScreen();
mainScreenHelper.createReactApp();
/***/}
});
//# sourceMappingURL=app.js.map
Hier ist meine aktuelle config-Datei:
'use strict';
//https://webpack.github.io/docs/configuration.html
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; //ekaya
var srcPath = path.join(rootPath, 'src/client'); //ekaya/src/client
var distPath = path.join(rootPath, 'dist/client'); //ekaya/dist/client
module.exports =
{
bail: true,
cache: true,
context: rootPath,
debug: true,
devtool: 'source-map', //inline-source-map, https://webpack.github.io/docs/configuration.html#devtool
target: 'web', //node, web
devServer:
{
contentBase: distPath,
historyApiFallback: true,
outputPath: path.join(distPath, 'devServer')
},
entry:
{
app: path.join(srcPath, 'app/home.jsx'),
lib: ['react', 'react-router', 'react-dom', 'jquery', 'lodash', 'history']
},
output:
{
path: distPath,
publicPath: '',
filename: '[name].js',
pathInfo: true
},
resolve:
{
root: srcPath,
extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
modulesDirectories: ['node_modules', srcPath]
},
module:
{
loaders:
[
{test: /\.js$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules)/},
{test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules)/},
{test: /\.ts$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules)/},
{test: /\.tsx$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules)/},
{test: /\.scss$/, loaders: ['style', 'css', 'sass']},
{test: /\.png$/, loader: 'file-loader'},
{test: /\.jpg$/, loader: 'file-loader'},
{test: /\.jpeg$/, loader: 'file-loader'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"}
]
},
plugins:
[
new CopyWebpackPlugin
([
{ from: path.join(srcPath, 'images'), to: 'images' }
]),
new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
new HtmlWebpackPlugin
({
inject: true,
template: path.join(srcPath, 'index.html')
}),
new webpack.NoErrorsPlugin()
]
};
Meine tsconfig.json
{
"buildOnSave": false,
"compileOnSave": false,
"compilerOptions":
{
"allowJs": true,
"jsx": "react",
"noImplicitAny": true,
"module": "commonjs",
"outDir": "dist/client/ts",
"removeComments": true,
"sourceMap": false,
"target": "es5"
},
"exclude":
[
"node_modules",
"dist"
]
}
- Könntest du deine tsconfig.json?
- babel-eslint. stackoverflow.com/questions/39158552/...
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte das gleiche problem. Sie installiert ES6. Der import schlägt fehl, w/o it.
Babel-Datei kopiert, ohne transformiert
EDIT:
.rc- Dateien. Ich hatte mich schon sehr sorgfältig kopieren Sie das setup von github Beispiele und dafür, dass meine Letzte webpack config-Objekte abgestimmt, aber ich hatte vergessen, über diese versteckten Dateien (2. mal, hab ich gefangen).Ich lief in das gleiche Problem und fand heraus, dass meine Datei-Struktur war das problem:
Module können nur importiert aus dem selben oder einem niedrigeren Niveau als Einstiegspunkt konfiguriert
webpack.config.jsimmodule.exports.entry, d.h.:War ich versucht, zu importieren locales von einer höheren Ebene:
Nach dem Umzug der locales-Verzeichnis, funktioniert der import:
Wenn Sie nach der Anleitung auf https://webpack.js.org , die Sie möglicherweise nicht erkennen, dass die Website ist nur dokumentieren Webpack version 2 oder höher, nicht Webpack 1. Eines der neuen features von Webpack 2 ist, dass es native ES6
import,exportundSystem.import.Zu installieren, müssen Sie Webpack 2 ersten:
Wenn Sie möchten, um zu sehen, eine Liste aller Webpack Versionen, Ausführung:
Ok, ich hab das auf der Arbeit irgendwie nicht wirklich sicher, welcher Teil es gemacht hat, aber hier sind alle meine config-Dateien für alle vor dem gleichen problem in die Zukunft;
webpack:
.babelrc:
Paket.json
tsconfig.json:
Testungen.json
Ich auch empfehlen das löschen der kompilierten Ausgabe (meine "dist" - Ordner) und den Wiederaufbau ohne mit dem webpack devServer.
Und da einige reagieren-router-Geschichte-Testungen scheinen nicht zu funktionieren, Ihre eigenen schreiben: