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

Question

我有一个使用 Angular 的项目。它既不使用任务管理器也不使用依赖管理器，并且所有库都存储在 repo 中，并使用普通的旧 <script> 标签包含在其中，例如 <script src="libs/angular/angular.min.js"></script>.

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

gulp + bower 没有问题，因为 gulp-inject，但我找不到任何类似的东西可以与 webpack 一起使用。

是否有任何工具可以让我按原样使用现有代码并仅使用 webpack 编写新模块？

Answer 1

这是我目前得到的解决方案。由于 webpack 每个包需要一个入口点，我仍然必须将所有这些遗留 js 导入到一个文件中。所以我决定在名为 index.js

的入口点使用 ES6 import（或 webpack 的要求）

这是 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 来避免在两个打包器中都有依赖模块，比如 angular 在 index.js 和 vendor.js 中是必需的，但是使用这个插件 webpack 将处理并仅在 vendor.js

中添加 js 代码

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

How to migrate from imports using <script> to module bundler?

npm

angularjs

bundling-and-minification

bower

webpack