Question

我有一个使用Angular的项目。它不使用任务管理器和依赖管理器，并且所有库都存储在repo中，并使用普通的旧＆lt; script＆gt; 标记包含，如＆lt; script src =“libs / angular / angular。 min.js“＆gt;＆lt; / script＆gt; 。

＆＃xA;＆＃xA;

我想通过引入模块捆绑器并自动化构建过程来实现应用程序的现代化。最初的想法是gulp + bower，但是我看到webpack + npm3现在是一种趋势。

＆＃xA;＆＃xA;

gulp + bower没有问题因为之类的东西gulp-inject ，但是找不到任何与webpack类似的东西。

＆＃xA;＆＃xA;

是否有任何工具可以让我使用现有的代码作为是的，只使用webpack写新模块？

＆＃xA;

Answer 1

这是我到目前为止所获得的解决方案。由于webpack每个bundle需要一个入口点，我仍然需要在一个文件中导入所有这些遗留j。所以我决定在名为index.js的入口点使用ES6 import（或webpack＆＃39; s）

这里是webpack配置的样子

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

var basePath = __dirname + "/target/app";
module.exports = {
    context: basePath,
    entry: {
        app: './index.js',
        vendor: './vendor.js'
    },
    output: {
        path: basePath + "/build",
        filename: '[name].js'
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: 'babel?presets=es2015', exclude: /node_modules/},
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new webpack.ProvidePlugin({
            "$": "jquery",
            "jQuery": "jquery",
            "window.jQuery": "jquery",
            "_": "lodash"
        }),
    ],
};

所以在index.js中我跟着

import './app/component1.js'
import './app/component2.js'
//all the rest imports from index.html

至于第三部分库，如jquery，angular等...我决定在单独的包中描述导入，因此还有另一个名为vendor.js的包

import './libs/lodash.js'
import './libs/jquery.js'
//and all the rest libraries
//note that here we can use now libs from npm node_modules like
import 'angular' //will take angular from node_modules/angular

我在执行此操作时遇到的重要问题是遗留模块与webpack实际上并不兼容，因为使用了$，_等全局变量... ProvidePlugin有帮助在此处，将require({module})添加到提供的{variable}符合的模块中，如配置'variable': 'module'

中所述

请注意，我使用CommonsChunkPlugin来避免在两个捆绑包中都有依赖模块，例如在index.js和vendor.js中需要angular，但是使用此插件webpack将处理它并仅在vendor.js中添加js代码

如何使用<script>从导入迁移到模块捆绑器？

1 个答案: