0

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": "2.6.9",
                "modules": false,
                "targets": {
                    "browsers": "last 2 versions, not ie <= 9"
                }
            }
        ]
       
    ],
   
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
        ]
    ]
}

package.json

{
    "name": "bianji",
    "version": "1.0.0",
    "description": "A Vue.js project",
    "author": "",
    "private": true,
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js"
    },
    "dependencies": {
        "@nutui/nutui": "^2.0.9",
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "babel-runtime": "^6.0.0",
        "core-js": "^2.6.9",
        "img-vuer": "^0.19.1",
        "jquery": "^3.4.1",
        "moment": "^2.24.0",
        "swiper": "^4.5.0",
        "vue": "^2.6.10",
        "vue-clipboard2": "^0.2.1",
        "vue-dplayer": "^0.0.10",
        "vue-qriously": "^1.1.1",
        "vue-quill-editor": "^3.0.6",
        "vue-router": "^3.0.3",
        "vue-star-rating": "^1.6.1",
        "vue-swipe-actions": "^2.0.0-beta.6"
    },
    "devDependencies": {
        "@babel/core": "^7.6.3",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/plugin-transform-modules-commonjs": "^7.6.0",
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/polyfill": "^7.6.0",
        "@babel/preset-env": "^7.6.3",
        "@vue/babel-preset-app": "^3.5.5",
        "autoprefixer": "^7.1.2",
        "babel-core": "^7.0.0-bridge.0",
        "babel-loader": "^7.0.0",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-polyfill": "^6.0.16",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-0": "^6.0.15",
        "babel-preset-stage-2": "^6.24.1",
        "babel-preset-stage-3": "^6.24.1",
        "babel-register": "^6.22.0",
        "chalk": "^2.0.1",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.28.0",
        "cube-ui": "~1.12.15",
        "eventsource-polyfill": "^0.9.6",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "less": "^2.7.3",
        "less-loader": "^4.0.5",
        "node-notifier": "^5.1.2",
        "node-sass": "^4.12.0",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "portfinder": "^1.0.13",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "rimraf": "^2.6.0",
        "sass-loader": "^7.1.0",
        "sass-resources-loader": "^2.0.1",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2",
        "url-loader": "^0.5.8",
        "vue-awesome-swiper": "^3.0.0",
        "vue-cli-plugin-cube-ui": "^0.2.5",
        "vue-lazyload": "^1.2.6",
        "vue-loader": "^12.1.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^3.6.0",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0"
    },
    "engines": {
        "node": ">= 4.0.0",
        "npm": ">= 3.0.0"
    },
    "postcss": {
        "plugins": {
            "autoprefixer": {}
        }
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 11",
        "Android >= 4.0",
        "iOS >= 8"
    ],
    "resolutions": {
        "browserslist": "4.6.3",
        "caniuse-lite": "1.0.30000974"
    },
    "transformModules": {
        "cube-ui": {
            "transform": "cube-ui/src/modules/${member}",
            "kebabCase": true
        }
    }
}

babel.config.js

module.exports = {
    presets: ["@babel/preset-env"],
    plugins: ["syntax-dynamic-import", "@babel/transform-runtime"]
};

webpack.config.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

module.exports = {
    context: path.resolve(__dirname, "../"),
    entry: {
        app: "./src/main.js"
    },
    output: {
        // path: config.build.assetsRoot,
        // filename: 'pk-skin.min.js',
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        publicPath:
            process.env.NODE_ENV === "production"
                ? config.build.assetsPublicPath
                : config.dev.assetsPublicPath
    },
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            vue$: "vue/dist/vue.esm.js",
            "@": resolve("src")
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                // include: [resolve("src")],
                exclude: /node_modules/,
                options: {
                    //预设
                    presets: ["@babel/preset-env"],
                    plugins: ["syntax-dynamic-import", "transform-runtime"]
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: utils.assetsPath("img/[name].[hash:7].[ext]")
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: utils.assetsPath("media/[name].[hash:7].[ext]")
                }
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            },
            // {
            //     test: /\.(sa|sc)ss$/,
            //     include: [resolve("src")],
            //     use: [
            //         {
            //             loader: "style-loader!css-loader!sass-loader!postcss-loader",
            //             options: {
            //                 data: `@import "@nutui/nutui/dist/styles/index.scss";@import "@/components/scss/skin.scss";@import "@/components/scss/common.scss"; `
            //             }
            //         }
            //     ]
            // },
            // {
            //     test: /\.(css|scss|sass)$/,
            //     include: [],
            //     loader: ["style-loader", "css-loader", "sass-loader", "postcss-loader"]
            // },
            {
                // 增加对 SCSS 文件的支持
                test: /\.(sa|sc)ss$/,
                include: [resolve("src/assets")],
                // SCSS 文件的处理顺序为先 sass-loader 再 css-loader 再 style-loader
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "sass-loader"
                        // options: { webpack4 vue-cli3
                        //     data: `@import "@/styles/skin.scss";@import "@/styles/common.scss";@import "@nutui/nutui/dist/styles/index.scss";`
                        // }
                    }
                ]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: utils.assetsPath("fonts/[name].[ext]")
                }
            },
            {
                test: /\.styl(us)?$/,
                use: ["vue-style-loader", "css-loader", "stylus-loader"]
            }
        ]
    }
};

搜索了很多的关于this.setDynamic error的答案,但是还是无法解决,求大佬指点一下~
error

Module build failed: TypeError: this.setDynamic is not a function
    at PluginPass.pre (C:\proj\src\login\node_modules\babel-plugin-transform-runtime\lib\index.js:31:12)
    at transformFile (C:\proj\src\login\node_modules\@babel\core\lib\transformation\index.js:97:25)
    at runSync (C:\proj\src\login\node_modules\@babel\core\lib\transformation\index.js:35:3)
    at transformSync (C:\proj\src\login\node_modules\@babel\core\lib\transform-sync.js:15:38)
    at Object.transform (C:\proj\src\login\node_modules\@babel\core\lib\transform.js:20:65)
    at transpile (C:\proj\src\login\node_modules\babel-loader\lib\index.js:55:20)
    at Object.module.exports (C:\proj\src\login\node_modules\babel-loader\lib\i

现在发现是因为在导入的包中有扩展运算符,然而webpack不能编译node_modules中的扩展运算符导致的报错,这样写也不对【重点】

include: [resolve("src"),resolve("vue-swipe-actions")],
// exclude: [/node_modules/]

vue-swipe-actions是node中的包,目前暂行办法是把有扩展运算符的插件【vue-swipe-actions】引入项目中当做源文件而不是包引入,这样才能编译完成~

yyccQQu 304
10月10日提问
2 个回答
1

已采纳

你把完整的错误都发出来,

你的问题,可能是几个地方的问题:

  1. 你声明了 .bablrc 为什么 在webpack中又声明 options?只需需要一个地方,webpack 中的配置会把 .bablrc 覆盖,所以删除 webpack 中的配置
  2. 确定你的插件版本和 babel的版本
        "babel-core": "^7.0.0-bridge.0",
        "babel-loader": "^7.0.0",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-polyfill": "^6.0.16",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-0": "^6.0.15",
        "babel-preset-stage-2": "^6.24.1",
        "babel-preset-stage-3": "^6.24.1",
        "babel-register": "^6.22.0",

以上的全部使用 npm uni xxx 卸载掉


webpack 跨域的设置
webpack 是有个 devServer 的配置,具体 代理( 跨域)配置如下:

module.exports = {
  devServer:{
        proxy: {
          '/api/a/b': {
            target: 'http://localhost:3000',
            pathRewrite: {'^/api' : ''}
          }
  }
}
1

clipboard.png
你这个是全部都排除了
你想编译哪个 你就include一下嘛

撰写答案

推广链接