在webpack中如何修复＆＃39;导入声明可能只出现在模块的顶层？

时间：2016-05-04 09:14:19

标签： webpack

Webpack构建成功，我可以浏览到我的网页。但是，Javascript失败了，说：＆＃39;导入声明可能只出现在模块的顶层＆＃39;

下面是我输出的包含import语句的app.js。

如何更改我的webpack配置文件以在构建时删除import语句？ 

'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()
    ]
};

这是我当前的配置文件：

{
    "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"
    ]
}

我的tsconfig.json 

    public async Task TakePhoto()
    {
        var result = await CrossMedia.Current.Initialize();

        if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
        {
            _analyticsService.TagEvent("AndroidCameraService : Camera Not Available");
        }
        else
        {
            var file = await CrossMedia.Current.TakePhotoAsync(new StoreCameraMediaOptions
            {
                DefaultCamera = CameraDevice.Rear,
                Directory = "Test",
                Name = "Original.jpg",
                PhotoSize = PhotoSize.Full,
                SaveToAlbum = false
            });

            if (file == null)
            {
                _analyticsService.TagEvent("AndroidCameraService : File Null");
            }
            else
            {
                var rotationNeeded = GetNeededRotation(file.Path);

                ResizeImage(file.Path, file.Path.Replace("Original", "Resized"), 320, 240);

                var byteArray = File.ReadAllBytes(file.Path.Replace("Original", "Resized"));

                PhotoAsBase64String = Convert.ToBase64String(byteArray);

                CleanUpFiles(file.Path);
            }
        }
    }

4 个答案:

答案 0 :(得分：11)

我遇到了同样的问题。你安装了ES6。导入失败了。

Babel file is copied without being transformed

编辑：

  

默认情况下，Babel 6.x不执行任何转换。你需要告诉它要运行什么转换：

npm install babel-preset-es2015
  

并运行

babel --presets es2015 proxy.js --out-file proxified.js
  

或创建包含

的.babelrc文件 
{
    "presets": [
        "es2015"
    ]
}

答案 1 :(得分：5)

我遇到了同样的问题，发现我的文件结构是问题所在：

模块只能从与webpack.config.js中module.exports.entry中配置的入口点相同或更低的级别导入，即：

module.exports = {
  entry: path.resolve(__dirname, 'javascripts', 'main.js')
}

我试图从更高级别导入 locales ：

├── javascripts
│   └── main.js
└── locales
    ├── de.js
    └── en.js

移动locales目录后，导入工作：

└── javascripts
    ├── locales
    │   ├── de.js
    │   └── en.js
    └── main.js

答案 2 :(得分：2)

如果您正在关注https://webpack.js.org上的指南，您可能没有意识到该网站仅记录Webpack版本2或更高版本，而不是Webpack 1. Webpack 2的一个新功能是它具有原生ES6 import，export和System.import。

您需要先安装Webpack 2：

npm install --save-dev webpack@2.2.0-rc.1

如果要查看所有Webpack版本的列表，请运行：

npm show webpack versions --json

答案 3 :(得分：1)

好的，我以某种方式让这个工作，不确定哪个部分做了，但这里是我所有的配置文件，面向未来面临同样问题的任何人;

的WebPack：

'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; 
var srcPath = path.join(rootPath, 'src/client');
var distPath = path.join(rootPath, 'dist/client'); 

module.exports =
{
    bail: true,
    cache: false,
    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, 'typings']
    },
    module:
    {
        loaders:
        [
            {test: /\.js$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|typings)/ },
            {test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|typings)/ },
            {test: /\.ts$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|typings)/ },
            {test: /\.tsx$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|typings)/ },
            {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()
    ]
};

.babelrc：

{
    "presets": ["es2015", "react"]
}

的package.json 

{
  "name": "ekaya",
  "private": "true",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies":
  {
      "jquery": "2.2.3",
      "lodash": "4.11.1",
      "font-awesome": "4.6.1",
      "history": "2.1.1",
      "react": "15.0.2",
      "react-dom": "15.0.2",
      "react-router": "2.4.0",

      "compression": "1.0.3",
      "cors": "2.5.2",
      "helmet": "1.3.0",
      "loopback": "2.22.0",
      "loopback-boot": "2.6.5",
      "loopback-component-explorer": "2.4.0",
      "loopback-datasource-juggler": "2.39.0",
      "serve-favicon": "2.0.1"
  },
  "devDependencies":
  {
    "node-sass": "3.7.0",
    "nsp": "2.1.0",
    "babel-core": "6.8.0",
    "babel-loader": "6.2.4",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "css-loader": "0.23.1",
    "file-loader": "0.8.5",
    "jsx-loader": "0.13.2",
    "font-awesome": "4.6.1",
    "copy-webpack-plugin": "2.1.3",
    "html-webpack-plugin": "2.16.1",
    "sass-loader": "3.2.0",
    "style-loader": "0.13.1",
    "ts-loader": "0.8.2",
    "typescript-loader": "1.1.3",
    "typescript": "1.8.10",
    "typings": "0.8.1",
    "webpack": "1.13.0",
    "webpack-dev-server": "1.14.1"
  },
  "scripts":
  {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/webpack --progress --colors",
    "run": "./node_modules/.bin/webpack-dev-server --hot --inline --progress --colors --watch"
  },
  "repository":
  {
    "type": "git",
    "url": ""
  },
  "config":
  {
    "port": "8080"
  },
  "author": "",
  "license": "private",
  "homepage": ""
}

tsconfig.json：

{
    "buildOnSave": false,
    "compileOnSave": false,
    "compilerOptions":
    {
        "allowJs": true,
        "jsx": "react",
        "noImplicitAny": true,
        "module": "commonjs",
        "outDir": "dist/client/ts",
        "removeComments": true,
        "sourceMap": false,
        "target": "es6"
    },
    "exclude":
    [
        "node_modules",
        "dist",
        "typings"
    ]
}

typings.json 

{
  "ambientDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20160417213236",
    "lodash": "registry:dt/lodash#3.10.0+20160330154726",
    "react": "registry:dt/react#0.14.0+20160423065914",
    "react-dom": "registry:dt/react-dom#0.14.0+20160412154040"
  },
  "dependencies": {}
}

我还建议删除已编译的输出（我的＆＃39; dist＆＃39;文件夹）并使用webpack devServer重建，不用。

由于某些反应路由器的历史记录似乎无法发挥作用，请自行编写：

declare module 'history/lib/createBrowserHistory' {
    const x: any;
    export = x;
}

declare module 'react-router' {
    const x: any;
    export = x;
}
相关问题
最新问题