问题描述
Webpack 构建成功,我可以浏览到我的网页.但是,Javascript 失败,说:导入声明可能只出现在模块的顶层"
下面是我输出的包含导入语句的 app.js.
如何更改我的 webpack 配置文件以在构建时去掉 import 语句?
webpackJsonp([0],{/***/0:/***/功能(模块,出口,__webpack_require__){__webpack_require__(1);__webpack_require__(74);module.exports = __webpack_require__(76);/***/},/***/76:/***/函数(模块,导出){严格使用";导入'app/tools/typescriptImports.ts';import * as mainScreenHelper from 'app/tools/mainScreenHelper';从反应"导入反应;import * as reactDom from 'react-dom';从反应路由器"导入路由器;从'history/lib/createBrowserHistory'导入createBrowserHistory;从app/tools/routes"导入路由;导入样式/app.scss";导入 'font-awesome/scss/font-awesome.scss';mainScreenHelper.removeLoadingScreen();mainScreenHelper.createReactApp();/***/}});//# sourceMappingURL=app.js.map
这是我当前的配置文件:
'use strict';//https://webpack.github.io/docs/configuration.htmlvar webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var CopyWebpackPlugin = require('copy-webpack-plugin');var path = require('path');var rootPath = __dirname;//埃卡亚var srcPath = path.join(rootPath, 'src/client');//ekaya/src/客户端var distPath = path.join(rootPath, 'dist/client');//ekaya/dist/客户端模块.exports ={保释金:真的,缓存:真实,上下文:根路径,调试:真的,devtool: 'source-map',//inline-source-map, https://webpack.github.io/docs/configuration.html#devtool目标:'网络',//节点,网络开发服务器:{contentBase:distPath,historyApiFallback: 真,outputPath: path.join(distPath, 'devServer')},入口:{应用程序:path.join(srcPath, 'app/home.jsx'),lib: ['react', 'react-router', 'react-dom', 'jquery', 'lodash', 'history']},输出:{路径:distPath,公共路径:'',文件名:'[名称].js',路径信息:真},解决:{根:srcPath,扩展名:['', '.js', '.jsx', '.ts', '.tsx'],modulesDirectories: ['node_modules', srcPath]},模块:{装载机:[{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$/, 加载器: ['style', 'css', 'sass']},{测试:/\.png$/,加载器:'文件加载器'},{测试:/\.jpg$/,加载器:'文件加载器'},{测试:/\.jpeg$/,加载器:'文件加载器'},{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"}]},插件:[新的 CopyWebpack 插件([{ from: path.join(srcPath, 'images'), to: 'images' }]),新的 webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),新的 HtmlWebpack 插件({注入:真实,模板:path.join(srcPath, 'index.html')}),新的 webpack.NoErrorsPlugin()]};
我的 tsconfig.json
{buildOnSave":假,compileOnSave":假,编译器选项":{"allowJs": 真,"jsx": "反应","noImplicitAny": 真,"module": "commonjs","outDir": "dist/client/ts","removeComments": 真,源地图":假,目标":es5"},排除":[节点模块",区"]}
我遇到了同样的问题.你安装了 ES6.导入失败,没有它.
默认情况下,Babel 6.x 不执行任何转换.您需要告诉它要运行哪些转换:
npm install babel-preset-es2015
然后运行
babel --presets es2015 proxy.js --out-file proxified.js
或创建一个包含
的 .babelrc 文件{预设":[es2015"]}
Webpack builds successfully and I can browse to my webpage. However, the Javascript fails, saying: 'import declarations may only appear at top level of a module'
Below is my outputted app.js that contains the import statements.
How do I change my webpack config file to get rid of the import statements when it builds?
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
Here is my current config file:
'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()
]
};
My 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"
]
}
I had the same problem. You installed ES6. The import fails w/o it.
Babel file is copied without being transformed
EDIT:
npm install babel-preset-es2015
babel --presets es2015 proxy.js --out-file proxified.js
{
"presets": [
"es2015"
]
}
这篇关于在 webpack 中如何修复“导入声明可能只出现在模块的顶层"?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!