Question

我一直在将最初在Laravel 5.2中构建的项目升级到Laravel 5.6。

回到Laravel 5.2，我们使用Gulp和Laravel Elixir。在Laravel 5.6中，他们现在正在使用Webpack和Laravel Mix。

我发现gist似乎涵盖了大部分步骤。

该应用程序最初由一个代理商建立，然后在我被雇用时交给我。在他们的app.js文件的自定义版本中，他们有：

// Bootstrap Rim
System.import('rim/bootstrap.js').then(function(Rim) {
    Rim.Bootstrap.all();
});

哪个是更大的app.js文件的一部分：

System.config({
    baseURL: '/js'
});

require('./core/bootstrap');
require('./core/components');

/**
 * Create the application.
 */
window.App = new Vue({
    el: '#page',

    /**
     * Bootstrap the application. Load the initial data.
     */
    mounted: function() {
        // Bootstrap Rim
        System.import('rim/bootstrap.js').then(function(Rim) {
            Rim.Bootstrap.all();
        });

        let self = this;
    },

    methods: {
        navigate: function(location) {
            window.location = location;
        }
    }
});

我发现这个question在Webpack中使用System.import()并使用了顶部的answer：

我按照提到安装了System dynamic import package; npm install --save-dev babel-plugin-syntax-dynamic-import
我在项目的根目录中添加了一个.babelrc文件，其中包含以下内容（Laravel Mix在运行Webpack时会自动选择此项）

{ ＆＃34;插件＆＃34;：[＆＃34; syntax-dynamic-import＆＃34;] }

当我运行npm run dev时，我收到以下错误：

错误编译错误44次   8:29:23 AM找不到这些依赖项：


rim / bootstrap.js in ./resources/assets/js/app.js

rim / dialog.js in ./node_modules/babel-loader/lib?{"cacheDirectory" ;:true,"presets" ;:[["env" ，{＆＃34;模块＆＃34;：假，＆＃34;目标＆＃34; {＆＃34;浏览器＆＃34;：[＆＃34;＆GT;   2％＆＃34]，＆＃34;丑化＆＃34;：真}}]]＆＃34;插件＆＃34;：[＆＃34;变换对象的其余扩频＆＃34; [＆＃34;变换运行＆＃34; {＆＃34;填充工具＆＃34;：假，＆＃34;助手＆＃34;：假}]，＆＃34;语法动态导入＆＃34;]}！ ./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/fermentables-screen.vue，   ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules" ;：假，＆＃34;目标＆＃34; {＆＃34;浏览器＆＃34;：[＆＃34;＆GT;   2％＆＃34]，＆＃34;丑化＆＃34;：真}}]]＆＃34;插件＆＃34;：[＆＃34;变换对象的其余扩频＆＃34; [＆＃34;变换运行＆＃34; {＆＃34;填充工具＆＃34;：假，＆＃34;助手＆＃34;：假}]，＆＃34;语法动态导入＆＃34;]}！ ./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/hops-screen.vue和其他8位

rim / form-notification.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env&# 34;，{＆＃34;模块＆＃34;：假，＆＃34;目标＆＃34; {＆＃34;浏览器＆＃34;：[＆＃34;＆GT;   2％＆＃34]，＆＃34;丑化＆＃34;：真}}]]＆＃34;插件＆＃34;：[＆＃34;变换对象的其余扩频＆＃34; [＆＃34;变换运行＆＃34; {＆＃34;填充工具＆＃34;：假，＆＃34;助手＆＃34;：假}]，＆＃34;语法动态导入＆＃34;]}！ ./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/adjuncts-screen.vue，   ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules" ;：假，＆＃34;目标＆＃34; {＆＃34;浏览器＆＃34;：[＆＃34;＆GT;   2％＆＃34]，＆＃34;丑化＆＃34;：真}}]]＆＃34;插件＆＃34;：[＆＃34;变换对象的其余扩频＆＃34; [＆＃34;变换运行＆＃34; {＆＃34;填充工具＆＃34;：假，＆＃34;助手＆＃34;：假}]，＆＃34;语法动态导入＆＃34;]}！ ./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/notifications-screen.vue   和另外7人

rim / message.js in ./node_modules/babel-loader/lib?{"cacheDirectory" ;:true,"presets" ;:[["env" ，{＆＃34;模块＆＃34;：假，＆＃34;目标＆＃34; {＆＃34;浏览器＆＃34;：[＆＃34;＆GT;   2％＆＃34]，＆＃34;丑化＆＃34;：真}}]]＆＃34;插件＆＃34;：[＆＃34;变换对象的其余扩频＆＃34; [＆＃34;变换运行＆＃34; {＆＃34;填充工具＆＃34;：假，＆＃34;助手＆＃34;：假}]，＆＃34;语法动态导入＆＃34;]}！ ./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/yeasts-screen.vue，   ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules" ;：假，＆＃34;目标＆＃34; {＆＃34;浏览器＆＃34;：[＆＃34;＆GT;   2％＆＃34]，＆＃34;丑化＆＃34;：真}}]]＆＃34;插件＆＃34;：[＆＃34;变换对象的其余扩频＆＃34; [＆＃34;变换运行＆＃34; {＆＃34;填充工具＆＃34;：假，＆＃34;助手＆＃34;：假}]，＆＃34;语法动态导入＆＃34;]}！ ./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/hops-screen.vue和另外14人

rim / select2.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets" ;:[["env" ，{＆＃34;模块＆＃34;：假，＆＃34;目标＆＃34; {＆＃34;浏览器＆＃34;：[＆＃34;＆GT;   2％＆＃34]，＆＃34;丑化＆＃34;：真}}]]＆＃34;插件＆＃34;：[＆＃34;变换对象的其余扩频＆＃34; [＆＃34;变换运行＆＃34; {＆＃34;填充工具＆＃34;：假，＆＃34;助手＆＃34;：假}]，＆＃34;语法动态导入＆＃34;]}！ ./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/common/components/select2-component.vue，   ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules" ;：假，＆＃34;目标＆＃34; {＆＃34;浏览器＆＃34;：[＆＃34;＆GT;   2％＆＃34]，＆＃34;丑化＆＃34;：真}}]]＆＃34;插件＆＃34;：[＆＃34;变换对象的其余扩频＆＃34; [＆＃34;变换运行＆＃34; {＆＃34;填充工具＆＃34;：假，＆＃34;助手＆＃34;：假}]，＆＃34;语法动态导入＆＃34;]}！ ./node_modules/vue-loader/lib/selector.js?type=script&index=0！./资源/资产/ JS /组件/普通/组件/ SELECT2-Ajax的component.vue


要安装它们，您可以运行：npm install --save rim / bootstrap.js   rim / dialog.js rim / form-notification.js rim / message.js rim / select2.js

找不到这些相关模块：

  ./node_modules/css-loader??ref--5-2!!/node_modules/postcss-loader/lib??postcss！。/ node_modules /中的
../../ images / search / delete_icon.png少装载机/ DIST / cjs.js ?? REF！ - 5-4 ./资源/资产/少/ app.less
  ./node_modules/css-loader??ref--5-2!!/node_modules/postcss-loader/lib??postcss！。/ node_modules /中的
../../ images / search / search_icon.png少装载机/ DIST / cjs.js ?? REF！ - 5-4 ./资源/资产/少/ app.less
  ./node_modules/css-loader??ref--5-2!!/node_modules/postcss-loader/lib??postcss！。/ node_modules/less-loader/dist中的
../ img / checkbox_icons.png /cjs.js??ref--5-4！./资源/资产/更少/ app.less
  ./node_modules/css-loader??ref--5-2!!/node_modules/postcss-loader/lib??postcss！。/ node_modules/less-loader/dist/中的
./ select2-spinner.gif cjs.js ?? REF！ - 5-4 ./资源/资产/少/ app.less

./ select2.png in ./node_modules/css-loader??ref--5-2!!/node_modules/postcss-loader/lib??postcss！。/ node_modules /less-love / dist / cjs。 JS ?? REF！ - 5-4 ./资源/资产/少/ app.less

./ select2x2.png in ./node_modules/css-loader??ref--5-2!!/node_modules/postcss-loader/lib??postcss！。/ node_modules /less-center / dist / cjs。 JS ?? REF - 5-4 ./资源/资产/更少/ app.less！   fs.js：1001 binding.stat（pathModule._makeLong（path），statValues）;

当我使用Gulp时，这一切都运行良好，所以我确信它不会很难让这个工作......

运行npm install --save rim/bootstrap.js rim/dialog.js rim/form-notification.js rim/message.js rim/select2.js会导致尝试从外部获取文件时出现一堆错误。

app.js位于resources/assets/js/app.js，rim/bootstrap.js是位于rim.js的已编译public/js/rim.js文件的一部分。

下面包含rim.js文件的示例：

我还需要做些什么呢？

使用Grap升级到使用Laravel Mix的Webpack

0 个答案: