Develop

.browserslistrc

@@ -0,0 +1,3 @@
+ > 0.01%
+last 2 version
+not dead

.prettierrc.js

@@ -0,0 +1,22 @@
+// 此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
+module.exports = {
+  printWidth: 150, //单行长度
+  tabWidth: 2, //缩进长度
+  useTabs: false, //使用空格代替tab缩进
+  semi: true, //句末使用分号
+  singleQuote: true, //使用单引号
+  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
+  jsxSingleQuote: true, // jsx中使用单引号
+  //trailingComma: 'all', //多行时尽可能打印尾随逗号
+  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
+  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
+  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
+  requirePragma: false, //无需顶部注释即可格式化
+  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
+  proseWrap: 'preserve', //不知道怎么翻译
+  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
+  //vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
+  endOfLine: 'lf', //结束行形式
+  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化。
+  'spaced-comment': 0, //註釋風格要不要有空格什麼的
+};

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+        targets: {
+          browsers: ['> 1%', 'last 2 versions', 'not dead'],
+        },
+        'corejs':'3',
+        'useBuiltIns':'usage'
+      },
+    ],
+  ],
+};

config/webpack-ts-build.js

@@ -0,0 +1,51 @@
+/* Package the contents of the src-ts folder as a js file */
+var path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const DtsBundleWebpack = require('dts-bundle-webpack');
+
+module.exports = {
+  entry: {
+    leafletFile: path.join(__dirname, '../ts/index.ts'),
+  },
+  output: {
+    path: path.join(__dirname, '../src'),
+    filename: 'leaflet.filelayer.js',
+    //library: 'L',
+    /* libraryTarget: 'umd',
+    umdNamedDefine: true,
+    globalObject: "typeof self !== 'undefined' ? self : this", */
+    //libraryTarget: 'amd',
+    //umdNamedDefine: false,
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new DtsBundleWebpack({
+      name: 'leaflet.filelayer',
+      main: path.join(__dirname, '../dts/index.d.ts'),
+      out: path.join(__dirname, '../src/leaflet.filelayer.d.ts'),
+      removeSource: false,
+      outputAsModuleFolder: false,
+    }),
+  ],
+  externals: {
+    leaflet: 'L',
+    togeojson: 'toGeoJSON',
+  },
+  resolve: {
+    extensions: ['.ts'],
+  },
+  devtool: false,
+  mode: 'development', //development production none
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: ['babel-loader', 'ts-loader'],
+      },
+    ],
+  },
+};

config/webpack.dev.js

@@ -0,0 +1,96 @@
+/*  */
+var path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const svgToMiniDataURI = require('mini-svg-data-uri');
+
+module.exports = [
+  {
+    entry: {
+      //leafletFile: path.join(__dirname, '../src/leaflet.filelayer.js'),
+      leafletFile: path.join(__dirname, '../doc/index.js'),
+    },
+    output: {
+      path: path.join(__dirname, '../dist'), 
+      filename: (pathData) => {
+        if (pathData.chunk.name === 'leafletFile') {
+          return 'leaflet.filelayer.js';
+        }
+        return '[name].js';
+      },
+      assetModuleFilename: 'assets/images/[hash:8][ext][query]', 
+    },
+    externals: {
+      //打包时排除以下两项
+      leaflet: 'L',
+      togeojson: 'toGeoJSON',
+    },
+    plugins: [
+      new CleanWebpackPlugin(),
+      new HtmlWebpackPlugin({
+        template: path.join(__dirname, '../doc/index.html'),
+        inject: 'body', //Wrap the packaged javaScript at the bottom of the body
+        filename: 'index.html',
+        chunks: ['leafletFile'], //Add the packaged js file to html-body-javaSript
+        chunksSortMode: 'none',
+      }),
+      new CopyPlugin({
+        patterns: [
+          {
+            from: 'doc/assets/images',
+            to: 'assets/images/',
+            force: true,
+          },
+        ],
+      }),
+
+      new MiniCssExtractPlugin({
+        //Package the css into a single file
+        filename: 'css/[name][hash:8].css',
+      }),
+    ],
+
+    mode: 'development', // development production none
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+        },
+        {
+          test: /\.svg$/i,
+          type: 'asset/inline',
+          generator: {
+            dataUrl: (content) => {
+              content = content.toString();
+              return svgToMiniDataURI(content);
+            },
+          },
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif)$/i,
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: 1 * 1024, // 4kb
+            },
+          },
+          generator: {
+            filename: 'assets/images/[hash:8][ext][query]',
+          },
+        },
+        {
+          test: /\.(eot|ttf|woff2?)$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'assets/font/[hash:8][ext][query]',
+          },
+        },
+
+        { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
+      ],
+    },
+  },
+];

config/webpack.none.js

@@ -0,0 +1,114 @@
+/* run the following code with the 'npm run none' command, see 'package.json' for details */
+var path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const svgToMiniDataURI = require('mini-svg-data-uri');
+const DtsBundleWebpack = require('dts-bundle-webpack');
+module.exports = [
+  {
+    entry: {
+      leafletFile: path.join(__dirname, '../doc/index.js'),
+    },
+    output: {
+      path: path.join(__dirname, '../none'),
+      //filename: '[name][hash:8].js',
+      filename: (pathData) => {
+        if (pathData.chunk.name === 'leafletFile') {
+          return 'leaflet.filelayer.js';
+        }
+        return '[name].js';
+      },
+      assetModuleFilename: 'assets/images/[hash:8][ext][query]',
+    },
+
+    externals: {
+      //Exclude the following two items when packing
+      leaflet: 'L',
+      togeojson: 'toGeoJSON',
+    },
+
+   /*  */
+    plugins: [
+      //Clear the contents of the none folder
+      new CleanWebpackPlugin(),
+      new HtmlWebpackPlugin({
+        template: path.join(__dirname, '../doc/index.html'),
+        //Whether to add a unique hash value to the path of static resources such as js,css, etc. introduced into the file each time
+        hash: false,
+        inject: 'body',
+        filename: 'index.html',
+        //Add the packaged js file to html-body-javaSript
+        chunks: ['leafletFile'],
+        chunksSortMode: 'none',
+      }),
+
+      new CopyPlugin({
+        patterns: [
+          {
+            from: 'doc/assets/images',
+            to: 'assets/images/',
+            force: true,
+          },
+        ],
+      }),
+      new MiniCssExtractPlugin({
+        //Package the css into a single file
+        filename: 'css/[name].css',
+      }),
+    ],
+
+    devtool: false,
+    mode: 'none', //development production none
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+              },
+            },
+            'postcss-loader',
+          ],
+        },
+
+        {
+          test: /\.svg$/i,
+          type: 'asset/inline',
+          generator: {
+            dataUrl: (content) => {
+              content = content.toString();
+              return svgToMiniDataURI(content);
+            },
+          },
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif)$/i,
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: 4 * 1024, // 4kb
+            },
+          },
+          generator: {
+            filename: 'assets/images/[hash:8][ext][query]',
+          },
+        },
+        {
+          test: /\.(eot|ttf|woff2?)$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'assets/font/[hash:8][ext][query]',
+          },
+        },
+
+        { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
+      ],
+    },
+  },
+];