Question

我正在使用webpack和babel将我的js和vue2文件转换为es5并编译成单个build.js

这是我的.babelrc

{
    "presets": ["latest", 'stage-1'],
    "plugins": [
        "transform-runtime",
        "transform-es2015-arrow-functions"
    ],
    "comments": false
}

和webpack.config.js

var path = require('path'),
    webpack = require('webpack');

require("babel-polyfill");

module.exports = {
    entry: ['babel-polyfill', './src'],
    output: {
        path: './dist/',
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'style-loader!css-loader!sass-loader',
                        styl: 'style-loader!css-loader!stylus-loader'
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.styl$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'stylus-loader',
                    },
                ],
            }
        ]
    },
    resolve: {

        modules: [
            path.resolve(__dirname, 'src'),
            path.resolve(__dirname, 'node_modules')
        ],
        alias: {
            vue: 'vue/dist/vue.common.js'
        },
        extensions: ['.js', '.vue']
    },

    plugins: [
        // new webpack.DefinePlugin({
        //   'process.env': {
        //     'NODE_ENV': JSON.stringify('production')
        //   }
        // })
    ]
}

运行以下命令，成功编译所有js和vue文件，包括导入的文件到build.js

./node_modules/webpack/bin/webpack.js --progress --watch --display-error-details

除https://github.com/vue-bulma/modal/

中的BaseModal.js外，所有es6兼容代码都转换为es5

BaseModal.js驻留在node_modules / vue-bulma-modal / src /中，并由Modal.vue导入到同一个包中

我通过

导入同一个包的index.js上的Modal

import {Modal} from 'vue-bulma-modal'

和BaseModal.js按原样结束在build.js中，而不是转换为es5。

但是如果我将Modal.vue和BaseModal.js直接复制到我的代码中并相应地更新导入路径，它就会很好地转换为es5而没有任何问题。

我在webpack.config.js中做错了什么？

Webpack2 + babel除了一个js文件外都转换为es5

0 个答案: