基于Webpack 4与npm，如何创建可导入或script标签引入的通用脚本？

这问题我太熟了！要让你用Webpack 4打包的testproject插件同时支持npm导入和script标签全局引入，核心就是利用Webpack的UMD输出格式，再配合几个关键配置调整，一步步来给你讲清楚：

1. 修改Webpack配置文件 #

在你的webpack.config.js里，重点调整output选项，让打包产物生成UMD格式（兼容CommonJS、AMD和全局变量三种模块系统）：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'testproject.js', // 建议同时生成压缩版，比如testproject.min.js
    // 配置全局变量名：用户通过script引入后，可直接用这个变量调用插件
    library: 'TestProject',
    // 指定输出格式为UMD，同时兼容多种模块规范
    libraryTarget: 'umd',
    // 若你的插件用ES6默认导出，这个配置能让全局变量直接拿到默认导出内容，不用额外加.default
    libraryExport: 'default',
    // 确保在Node环境下也能正确识别模块名
    umdNamedDefine: true
  },
  // 其他配置（比如mode、loader）根据你的项目需求调整
  mode: 'production'
};

2. 调整package.json配置 #

确保package.json的main字段指向你的打包产物，这样npm安装后，其他项目能正确找到入口文件：

{
  "name": "testproject",
  "version": "1.0.0",
  "main": "./dist/testproject.js",
  // 可选：如果要支持ES模块，可添加module字段指向未转译的源码（若有需求）
  // "module": "./src/index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  }
}

3. 确保入口文件导出正确 #

在src/index.js里，明确导出你的插件核心内容，比如：

// 示例插件核心代码
const TestProject = {
  init(options) {
    console.log('TestProject初始化完成，配置项：', options);
    // 这里写你的插件逻辑
  },
  // 其他插件方法...
};

// ES6默认导出，支持import导入
export default TestProject;

// 可选：同时支持CommonJS的require导入
// module.exports = TestProject;

4. 打包并发布到npm #

运行打包命令生成产物，然后发布到npm：

npm run build
npm login
npm publish

5. 两种使用方式测试 #

方式1：npm安装后导入使用

在目标项目中安装插件：

npm install testproject

然后在代码中调用：

// ES6 import方式
import TestProject from 'testproject';
TestProject.init({ foo: 'bar' });

// CommonJS require方式
const TestProject = require('testproject');
TestProject.init({ foo: 'bar' });

方式2：script标签直接引入

可以引用CDN上的包（比如unpkg），或者本地打包后的文件：

<script src="https://unpkg.com/testproject@1.0.0/dist/testproject.js"></script>
<script>
  // 直接使用全局变量TestProject
  TestProject.init({ foo: 'bar' });
</script>

额外优化：生成压缩版 #

如果需要提供压缩后的生产环境版本，可以在Webpack配置中添加terser-webpack-plugin（Webpack 4生产模式默认集成，也可手动配置），同时生成未压缩和压缩版：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 其他配置不变...
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: true,
          mangle: true
        },
        filename: 'testproject.min.js'
      })
    ]
  }
};

内容的提问来源于stack exchange，提问作者David Alsh