babel-loader无法将vue-router转换为mac中的es5代码

时间:2017-07-09 09:37:44

标签: vue.js babel uglifyjs gulp-uglify babel-loader

babel-loader在Windows中成功转换相同的代码,但无法在mac中转换es5中的vue-router。

我在没有使用vue-router的情况下重建了所有代码,一切顺利。 所以我只是想知道是否有人遇到过这个?

mac:10.12.4 (16E195)

节点:v8.1.3

的package.json:

{
  "engines": {
    "node": "7.5.0"
  },
  "dependencies": {
    "vue": "^2.3.4",
    "vue-router": "^2.6.0",
    "vue-template-compiler": "^2.3.4"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel-core": "^6.25.0",
    "babel-eslint": "^7.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.2",
    "babel-loader": "^7.1.0",
    "babel-plugin-component": "^0.9.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.4.2",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-stage-1": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "babel-preset-stage-3": "^6.22.0",
    "css-loader": "^0.27.3",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-loader": "^1.6.3",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.1.0",
    "exports-loader": "^0.6.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.10.1",
    "gulp": "3.9.1",
    "gulp-cssnano": "2.1.2",
    "gulp-delete-lines": "0.0.7",
    "gulp-eslint": "3.0.1",
    "gulp-less": "^3.3.0",
    "gulp-nodemon": "^2.2.1",
    "gulp-replace": "^0.5.4",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^4.3.11",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.1",
    "json-loader": "0.5.4",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "node-sass": "^4.5.1",
    "postcss-loader": "^1.3.3",
    "raw-loader": "0.5.1",
    "run-sequence": "1.2.2",
    "sass-loader": "^6.0.6",
    "script-loader": "^0.7.0",
    "style-loader": "^0.15.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.2.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1"
  }
}

.babelrc:

{
"presets": [
    ["es2015", { "modules": false }], "stage-1", "stage-2", "stage-3"
],
"plugins": [
    ["transform-vue-jsx"],
    ["transform-object-assign"],
    ["component", [{
        "libraryName": "element-ui",
        "styleLibraryName": "theme-default"
    }]]
]

}

的WebPack:

module.exports = {
entry: {
    app: `./client/app.js`
},
output: {
    path: path.resolve(__dirname, `../../`, config.destination),
    filename: `[name].js`
},
module: {
    rules: [{
        test: /\.vue$/,
        loader: `vue-loader`,
        options: {
            loaders: {
                js: 'babel-loader'
            }
        }
    }, {
        test: /\.js$/,
        loader: `babel-loader`,
        exclude: /(node_modules)/
    }],
    noParse: [/\/dist\/.+/]
},

resolve: {
    modules: [rootPath, `node_modules`],
    extensions: [`.js`, `.jsx`, `.vue`, `.json`, `less`, `scss`, `css`, `html`],
    alias: {
        vue: `node_modules/vue/dist/vue.js`,
        client: clientPath
    }
},

plugins: [
    new webpack.optimize.UglifyJsPlugin({
        mangle: false,
        comments: false,
        warnings: false,
        sourceMap: !!argv.test
    }),
    new webpack.LoaderOptionsPlugin({
        minimize: true
    })
],
devtool: `cheap-source-map`

};

收到错误:[ 'app.js from UglifyJs\nUnexpected token: keyword (default) [app.js:35217,7]' ] image

版(2017-07-10 11:38:19)

app.js:import VueRouter from 'vue-router';

package.json中的vue-router的{​​p> node_modules有:

"main": "dist/vue-router.common.js",
"module": "dist/vue-router.esm.js",
"name": "vue-router",

那么如何让babel使用main字段而不是module字段?

0 个答案:

没有答案